Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Dynamiczna wyszukiwarka
smok55453
post
Post #1





Grupa: Zarejestrowani
Postów: 64
Pomógł: 0
Dołączył: 29.09.2013

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

Witam. Mam pewną stronę która zawiera nazwy przepisów. Tych nazw jest od 500 do 600. Chciałbym do tej strony dodać dynamiczną wyszukiwarkę nazw przepisów. Nazwy przepisów są zapisane w bazie danych. Gdy użytkownik wpisze w wyszukiwarce np: litere "a" to w liście rozwijanej z suwakiem mają się pojawić wszystkie przepisy zaczynające się na literę "a". Proszę najlepiej o jakiś kod oraz o wytłumaczenie jak go uruchomić na stronie. Zaznaczam od razu że znam tylko PHP, HTML, CSS, MySQL.

Oto urywek mojej tabeli:klik
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
Turson
post
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

Masz na myśli autocomplete? http://turson.pl/blog/input-autocomplete-p...-z-bazy-danych/
Go to the top of the page
+Quote Post
smok55453
post
Post #3





Grupa: Zarejestrowani
Postów: 64
Pomógł: 0
Dołączył: 29.09.2013

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

może być jeżeli wyświetli się lista rozwijana z suwakiem i będzie można wybrać pole i aby po kliknięciu w nie przeszło do wybranego wiersza w tabeli

Wstawiłem to co mi dałeś do swojego kodu ale nie działa.
Go to the top of the page
+Quote Post
Turson
post
Post #4





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

Pokaż co wstawiłeś i jak
Go to the top of the page
+Quote Post
Forti
post
Post #5





Grupa: Zarejestrowani
Postów: 655
Pomógł: 73
Dołączył: 2.05.2014

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

http://forum.php.pl/index.php?showtopic=238030&hl=

Duplikacja tematów. Podałem Ci skrypt, prawda? Masz nawet przykłady z GOTOWYMI KODAMI tam.

https://twitter.github.io/typeahead.js/examples/


Użyj głowy... -.-


--------------------
Overwatch24 - najbardziej zaawansowany Polski portal Overwatch od fanów dla fanów.

Fachowo.co

Behance.net/fachowo
Go to the top of the page
+Quote Post
smok55453
post
Post #6





Grupa: Zarejestrowani
Postów: 64
Pomógł: 0
Dołączył: 29.09.2013

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

No więc tak:
w index.php:
[PHP] pobierz, plaintext 
  1. <head>
  2. <script src="jquery.min.js"></script>
  3.     <style type="text/css">
  4.         input#autocomplete{
  5.             width: 200px;
  6.         }
  7.         div#autocomplete_list{
  8.             display: none;
  9.             overflow: hidden;
  10.             background: grey;
  11.             border: 1px solid black;
  12.             border-radius: 5px;
  13.             padding: 3px;
  14.             width: 200px;
  15.             color: white;
  16.         }
  17.  
  18.         div#autocomplete_list li:hover{
  19.             font-weight: bold;
  20.             cursor: pointer;
  21.         }
  22.     </style>
  23.     <script>
  24.     $(document).ready(function(){
  25.         $("input#autocomplete").keyup(function(){
  26.             var div = $("div#autocomplete_list");
  27.             var value = $(this).val();
  28.             var text = "";
  29.             var pattern = new RegExp(value, "i");
  30.             $.ajax({
  31.                 type: 'POST',
  32.                 url: 'pobierz.php',
  33.                 data: { 'word':value },
  34.                 success: function(list){
  35.                     var data = $.parseJSON(list);
  36.                     $.each(data, function(i, item){
  37.                         console.log(item);
  38.                         text += "<li>"+item+"</li>";
  39.                     });
  40.                     if(text != ""){
  41.                         div.html(text);
  42.                         div.slideDown(1000);
  43.                     }
  44.                 }
  45.             });
  46.         });
  47.  
  48.         function closeAutocompleteList(){
  49.             $("div#autocomplete_list").slideUp(500);
  50.         }
  51.  
  52.         $("body").on('click', 'div#autocomplete_list li', function(){
  53.             $("input#autocomplete").val($(this).text());
  54.             closeAutocompleteList();
  55.         });
  56.  
  57.         $("div#autocomplete_list").mouseleave(function(){
  58.             closeAutocompleteList();
  59.         });
  60.  
  61.     });
  62. </script>
  63. </head>
  64. .
  65. .
  66. .
  67. echo '<input type="text" id="autocomplete"/>';
  68.             echo '<div id="autocomplete_list"></div>';
[PHP] pobierz, plaintext


pobierz.php

[PHP] pobierz, plaintext 
  1. <?php
  2. $cars = array();
  3. if(!empty($_POST['word'])){
  4.     // połaczenie z bazą danych
  5.     $db = new PDO('mysql:host=localhost;dbname=przepisy_cba_pl', 'root', '')
  6.         array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'")) or die('Nie można się połączyć z bazą danych.');
  7.     $stmt = $db->prepare('SELECT nazwa FROM przepisy WHERE nazwa LIKE :word');
  8.     $stmt->bindValue(':word', '%'.$_POST['word'].'%');
  9.     $stmt->execute();
  10.     $rows = $stmt->fetchAll();
  11.     foreach($rows as $row) {
  12.         $cars[] = $row['nazwa'];
  13.     }
  14. }
  15. echo json_encode($cars);
  16. ?>
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
Turson
post
Post #7





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

Sprawdz w konsoli przeglądarki co ajax zwraca
Go to the top of the page
+Quote Post
smok55453
post
Post #8





Grupa: Zarejestrowani
Postów: 64
Pomógł: 0
Dołączył: 29.09.2013

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

OK zrezygnowałem z tej wyszukiwarki co mi dałeś, i użyłem tej: klik

Działa wyszukiwarka, ale ja mam tabele z formularzem i jeżeli użytkownik wyszuka sobie cokolowiek to nie można użyć przycisku.

Ten post edytował smok55453 2.01.2015, 19:27:55
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: Przełącz na: Standardowy · 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 - 01:00
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn