Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][PHP]Wyszukiwanie dynamiczne
KamilStefan
post
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 2.09.2013

Ostrzeżenie: (0%)
-----

Witam!
Skryptów wyszukiwania dynamicnego znalazłem dużo, jednak nie taki, jakiego potrzebuję.
Mam stronę, która składa się z pola wyszukiwania, w które można wpisać cokolwiek oraz listy poniżej niego (wyświetlanej w pętli w php).
Chodzi mi o to, aby użytkownikowi w czasie wpisywania tekstu pozostawały tylko te linie z listy, które owy fragment w sobie zawierają.
Z góry dziękiuję za wszelkie podpowiedzi/wskazówki/rozwiązania.
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #2





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Ja bym zrobił coś w ten deseń:
[JAVASCRIPT] pobierz, plaintext 
  1. $("#search")
  2. 	.on("input", function () {
  3. 		$("#results li")
  4. 			.hide()
  5. 			.filter(function () {
  6. 				return $(this).text().indexOf($("#search").val()) >= 0;
  7. 			})
  8. 			.show();
  9. 	});
[JAVASCRIPT] pobierz, plaintext


Mój przykład zadziała tylko w nowoczesnych przeglądarkach, bo używa zdarzenia "input". Możesz to zastąpić "keyup", wtedy będzie działać również ze starszymi przeglądarkami. Po wpisaniu znaku, wszystkie elementy listy są chowane, a następnie pokazywane są tylko te, które zawierają w tekście wpisaną frazę.
Go to the top of the page
+Quote Post
KamilStefan
post
Post #3





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 2.09.2013

Ostrzeżenie: (0%)
-----

I jak to użyć na stronie? Przyznam szczerze, że o ile php znam już w miarę, o tyle w JS stawiam dopiero pierwsze kroki (tak jak tytuł działu - Przedszkole)
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #4





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Musisz na stronie załączyć bibliotekę jQuery na przykład tak (polecam wstawić to zaraz przed zamknięciem </body>):
[HTML] pobierz, plaintext 
  1. <script src="http://code.jquery.com/jquery.min.js"></script>
[HTML] pobierz, plaintext

A potem wstawić mój skrypt, najlepiej też zapisać go w zewnętrznym pliku i w analogiczny sposób połączyć ze stroną. Pamiętaj, że identyfikatory elementów HTML muszą się zgadzać, ja przykładowo założyłem, że pole tekstowe ma id="search", a lista z wynikami to <ol> lub <ul> z id="results".
Go to the top of the page
+Quote Post
KamilStefan
post
Post #5





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 2.09.2013

Ostrzeżenie: (0%)
-----

Zrobiłem tak i nic się nie dzieje w czasie wpisywania w polu tekstowym.
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #6





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Pokaż swój kod HTML. Jeśli to plik PHP, to możesz pokazać sam wynikowy HTML (pokaż źródło).
Go to the top of the page
+Quote Post
KamilStefan
post
Post #7





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 2.09.2013

Ostrzeżenie: (0%)
-----

Żródło części strony z listą.

[HTML] pobierz, plaintext 
  1. <script src="http://code.jquery.com/jquery.min.js"></script>
  2. <script>
  3.     $("#search")
  4.     .on("input", function () {
  5.     $("#results li")
  6.     .hide()
  7.     .filter(function () {
  8.     return $(this).text().indexOf($("#search").val()) >= 0;
  9.     })
  10.     .show();
  11.     });
  12. </script>
  13. <div class="section">
  14. 			<div id="portfolio" class="bg-color">
  15. 				<div class="container">
  16. 					<div class="title-section">
  17.  
  18. 						<h1>Tytul</h1>
  19. 						<p>Content</p>
  20. 							<input id="search"/>
  21. 					</div>
  22. 					<ul class="katlista" id="results">
  23. 						<li><a href="http://strona.pl/podstrona.html" rel="bookmark" title="Tresc linku">Tresc linku</a></li>
  24. 					</ul>
  25.  
  26. 				</div>
  27. 			</div>			
  28. 		</div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #8





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Cytat(SmokAnalog @ 3.11.2013, 20:51:15 ) *
polecam wstawić to zaraz przed zamknięciem </body>
Go to the top of the page
+Quote Post
KamilStefan
post
Post #9





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 2.09.2013

Ostrzeżenie: (0%)
-----

Dzięki, działa.
A może wiesz jak zmienić, aby nie uwzględniało rozróżnienia na małe i wielkie litery?
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #10





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Jasne, zamień tę linię:
[JAVASCRIPT] pobierz, plaintext 
  1. return $(this).text().indexOf($("#search").val()) >= 0;
[JAVASCRIPT] pobierz, plaintext

Na tę:
[JAVASCRIPT] pobierz, plaintext 
  1. return $(this).text().toLowerCase().indexOf($("#search").val().toLowerCase()) >= 0;
[JAVASCRIPT] pobierz, plaintext


EDIT

Przepraszam, pomyliłem nazwę metody biggrin.gif

Ten post edytował SmokAnalog 3.11.2013, 22:19:48
Go to the top of the page
+Quote Post
KamilStefan
post
Post #11





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 2.09.2013

Ostrzeżenie: (0%)
-----

Wszystko super działa. Dzięki smile.gif
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 11:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn