Autosugestia Ajax + MySQL
JavaScript, SQL 12 grudnia 2008Postanowiłem w końcu zrobić wyszukiwarkę, która opierała by się na Ajax’ie i pobierała dane z MySQL. Pogooglowałem i wynalazłem coś takiego: searchautosuggest.zip. Postaram się teraz omówić co i jak trzeba skonfigurować aby działało poprawnie.
Krok 1.
Wklejamy pliki do naszego katalogu. Tworzymy plik w którym chcemy mieć ową wyszukiwarkę. I za pomocą funkcji include dodajemy autosuggest.php. Wygląda to tak:
Krok 2.
Zeby nasz skrypt łączył się z bazą danych musimy nadać mu odpowiednie wpisy w pliku config.php. Oto ten plik:
| PHP | | copy code | | ? |
<?php |
// REQUIRED! Parameters to connecto to your DB |
// CHANGE ONLY $db_host, $db_name, $username, $password |
$db_host="host bazy danych"; |
$db_name="nazwa bazy"; |
$username="użytkownik"; |
$password="hasło"; |
Krok 3.
Teraz musimy określić co ma być pokazywane w naszej szukajce. Do ustawienie warunków wyszukiwania służy plik – search.php, a dokładniej ten fragment:
| PHP | | copy code | | ? |
$SQL_FROM = 'skąd'; |
$SQL_WHERE = 'co'; |
pierwsza opcja służy do określenia tabeli w bazie danych, natomiast druga do pola jakie ma być przeszukiwane. I teraz już pozostało nam określenie co będzie wyświetlane pod imputem. Robimy to zmieniając w lini 43 następujące wartości:
| PHP | | copy code | | ? |
<li><a href="index.php?co=<?php echo $row['co']; ?>"> <small></small></a></li> |
Wartość linku $row['co'] oznacz co będziemy przekazywać po naciśnięciu wybranego rekordu. Wartość $row['co pokaże'] pozwoli nam zmienić to co jest wyświetlane w z bazy w inpucie.
Krok 4 (opcjonalnie.
Wersja tej wyszukiwarki pozwala nam zmieniać wygląd. Aby zmienić wygląd (kolor, rozmiar czcionki, etc…) otwieramy plik autosuggest.php i w tym właśnie plik zmieniamy styl CSS w liniach:
| CSS | | copy code | | ? |
/* CUSTOMIZE AUTOSUGGEST STYLE */ |
#search-wrap input{width:400px; font-size:16px; color:#999999; padding:6px; border:solid 1px #999999;} |
#results{width:260px; border:solid 1px #DEDEDE; display:none;} |
#results ul, #results li{padding:0; margin:0; border:0; list-style:none;} |
#results li {border-top:solid 1px #DEDEDE;} |
#results li a{background:#EEEEEE; display:block; padding:4px; text-decoration:none; color:#000000; font-weight:bold;} |
#results li a small{display:block; text-decoration:none; color:#999999; font-weight:normal;} |
#results li a:hover{background:#ffcc99;} |
#results ul {padding:6px;} |
To już wszystko teraz możemy cieszyć się wyszukiwaniem w bazie danych.
Piotrek
14 stycznia 2010 at 12:57
czy moze masz pomysl jak rozwiazac podobny problem jesli potrzebuje wyszukac 2 zmienne
czyli mamy w bazie tabele xyz
w niej kolumny np: wojewodztwo;miasto;ulica
chce aby za pomoca formularza i 2 pol wybrac najpierw miasto a potem ulice czy da sie cos takiego zrobic ?
20 marca 2010 at 22:44
super, dzięki
świetny arykuł – tego szukałem
18 lipca 2010 at 23:45
Krok 1: „Wygląda to tak:”
Jak?