Loading:

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.fgetcsv() 2.pcntl_fork 3.PDF_scale 4.doubleval 5.imageline 6.urlencode 7.rand 8.Menu 9.reset 10.ftp_rmdir

56853.05

Jak zrobić AJAX suggest, podpowiedzi w AJAX PHP MySQL

Skrypt wyświetla podpowiedzi do słowa wpisywanego przez użytkownika do wyszukiwarki, dane pobiera z bazy danych.

Skrypt podziele na 3 części

Formularz wyszukiwania HTML;

Plik obsługujący AJAX;

Plik PHP odpowiadający na zapytanie AJAX

Do obsługi ajax wykorzystamy najlepszą według mnie biblioteke prototype : [ Pobierz ]

Plik prototype.js zapisujemy do katalogu js

Poniżej przedstawiam kod HTML formularza i kod CSS do niego

Dalsza czê¶æ: 1 2 3

Listing

// KOD HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX suggest</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styl.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/suggest.js"></script>
</head>
<body>
<form id="searchform" method="get" action="">
<fieldset>
<legend>Search</legend>
<input id="searchinput" type="text" name="searchinput" value="" onkeyup="searchSuggest();" />
<input id="searchsubmit" type="submit" value="Search" />
</fieldset>
<div id="search_suggest">
</div>
</form>
</body>
</html>

//KOD CSS styl.css

.suggest_link {
background-color: #f9f8f0;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #ffffff;
padding: 2px 6px 2px 6px;
cursor:pointer;
}
#search_suggest {
width:208px;
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: #edebd5 solid 1px;
visibility:hidden;

}

Laminas MVC: the most innovative framework in 2020 - get a book on Amazon

Dodano przez: igor
Ranga: Administrator serwisu Punktów: 0

Komentarze użytkowników

niestety ale nie działa :( złożyłem to wszytko razem i nic, programuję na co dzień w php i pewnie coś przeoczyłem jeśli chodzi o js

autor: mkr | 58 | 2009-01-23 20:41:47

Musisz zainstalować firebug w Firefox bez tego zginiesz w ajax. Tam widzisz co zostało wysłane jakie błędy wyszły i co jest nie tak.

autor: Igor | 59 | 2009-01-23 23:51:08

dzięki, pomogło, problem był z nawiasami w pliku suggest.js, Firebug chyba zostanie moim nowym przyjacielem :) ale pojawił się inny problem: do momentu kiedy wpisuje słowo znajdujące się w bazie w okienku wyświetla się napis empty (zamiast listy pasujących slów - bo chyba tak to działa?), kiedy jednak wpiszę słowo, którego w bazie nie ma w okienku pojawia się taki komunikat: undefinedonmouseout="javascript:suggestOut(this);" onclick="javascript:setSearch(this.innerHTML);" class="suggest_link"> a wydaje się, że wlaśnie wtedy powinien pojawic sie napis empty?

autor: mkr | 60 | 2009-01-24 00:31:07

Podaj linka gdzie to masz ja zobaczę w którym miejscu jest błąd.

autor: Igor | 61 | 2009-01-24 15:18:50

Już wszystko ok, w funkcji showResponse w pętli for brakuje nawiasu otwierającego blok instrukcji, stąd wziął się problem

autor: mkr | 64 | 2009-01-26 02:01:36

Faktycznie dzięki za info, już poprawiłem nie wiem jak się to mogło stać.

autor: Igor | 66 | 2009-01-26 13:29:16

Gdzi sie wpisuje frazy i linki kture maja wyskakiwac po wpisaniu frazy w wyszukiwarke ????????

autor: Jucu | 91 | 2009-02-13 23:02:23

"które", a to co ma się pokazywać dajesz w bazę linki to generujesz sam albo masz w bazie, zaawansowany suggest dodatkowo prowadzi ranking słów odpowiednio je dopasowując w tej kwestii liczy się pomysłowość i wasza intencja ja tylko podałem kod z którego można zbudować dowolne podpowiedzi.

autor: Igor | 92 | 2009-02-13 23:26:33

Witam, Chciałem przetestować ten przykład, jednak mam problemy z jego uruchomieniem, gdyż ciągle zwracaną wartością przez suggest.php jest wartość 'empty'. Nawet przy wywołaniu suggest.php?search=a. W przykładzie autor zapomniał dodać na końcu pliku suggest.php tagu domykającego '?>'. Czy ktoś może mi pomóc ?

autor: apache64 | 93 | 2009-02-16 15:49:23

Tak jak wyżej sprawdź po kolei gdzie jest błąd, użyj firebug dla firefox, sprawdź tak co jest wysyłane i odbierane poprzez skrypty. Zobacz może w funcji showResponse gdzieś masz błąd.

Zobacz kod dodany do tego wpisu
- function showResponse(text){
  var search_suggest = document.getElementById("search_suggest");
  search_suggest.style.visibility = "visible";
  var ss = document.getElementById('search_suggest')
  ss.innerHTML = '';
  var str = text.responseText.split("n");
  for(i=0; i < str.length - 1; i++){
  var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
  suggest += 'onmouseout="javascript:suggestOut(this);" ';
  suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
  suggest += 'class="suggest_link">' + str[i] + '</div>';
  ss.innerHTML += suggest;
  }

autor: Igor | 95 | 2009-02-16 17:08:47

Właśnie się z tym uporałem. Faktycznie, okazało się, że miałem błąd w showResponse(). Dzięki.

autor: apache64 | 97 | 2009-02-16 18:25:44

A czy naprawdę nie prościej byłoby dołożyć na koniec tego fajnego tutka jakąś spakowaną wersję gotowca bo kurde już ma dość szukania błędu, a za każdym razem pokazuje mi w firebug'u "searchSuggest is not defined" a już wszystko sprawdziłem w tej funkcji i wygląda tak jak w poście wyżej, mógłby mi ktoś ten gotowy działający skrypt podesłać na maila sirkzzz@mail.com , naprawdę bardzo jest mi potrzebny

autor: sirk | 125 | 2009-03-16 19:02:41

searchSuggest is not defined oznacza ze pewnie nie zaciągnołeś js do pliku sprawdź czy na pewno ta linia kodu prowadzi do pliku suggest.js i czy ścieżka jest ok

Zobacz kod dodany do tego wpisu
- <script type="text/javascript" src="js/suggest.js"></script>

autor: Igor | 127 | 2009-03-16 22:11:57

dałoby się wynik ładować tak żeby działało jak np w googlach ? żeby możnabyło wybrać strzałką odpowiedni rekord i wcisnąć ENTER ... ?

autor: slavo | 130 | 2009-03-18 15:17:49

a :) dało by się ale to już trochę pisania, musisz użyć zdarzenia JavaScript oddziałującego na wciśnięcie strzałka w górę i w dół i przypisać im odpowiednią funkcję która przeskakuje miedzy podpowiedziami. albo po prostu zamiast wyświetlania wyników na warstwie div użyj listy rozwijanej wtedy ten komponent sam będzie reagował na strzałki i enter. Tutaj daje ci przykładowe generowanie dla pola select

Zobacz kod dodany do tego wpisu
- {
  var suggest = '<option value="' + str[i] + '" onmouseover="javascript:suggestOver(this);" ';
  suggest += 'onmouseout="javascript:suggestOut(this);" ';
  suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
  suggest += 'class="suggest_link">' + str[i] + '</option>';
  ss.innerHTML += suggest;
  }

autor: Igor | 133 | 2009-03-18 18:58:26

Witam hmm mam pytanko pewnie to glupie pytanie ale musicie mi wybaczyc :) poskladalem te podpowiedzi i dzialaja super! Ale nie moge jakos wpiac w nie polskich znakow. I moze odrazu powiem ze w js jestem raczej slaby... z gory dziekuje za pomoc :)

autor: Cerber | 136 | 2009-03-19 09:52:36

Pewnie wpisujesz do bazy ręcznie i dlatego sypie się kodowanie, jak dodasz przez normalny insert bedzie ok, lecz jest tez linia kodu która jak widzisz przekodowuje znaki na utf8, usuń tą linie i sprawdź czy zadziała (podałem ją niżej)

Zobacz kod dodany do tego wpisu
- $db = lacz_bd();
  if (mysqli_connect_errno() === 0){
  $db -> query("SET NAMES 'utf8'");
  //albo ustaw na latin2
  //$db -> query("SET NAMES 'latin2'");
  }

autor: Igor | 137 | 2009-03-19 12:03:36

No tak taka linia kodu byla ale troche przerobilem ten plik i moj suggest.php wyglada jak nizej. Pryeprasyam ye nie dolacyzlem go odrayu wpisuje a wpisuje do bayz y pliku txt pentelka z insert into...

Zobacz kod dodany do tego wpisu
- <html>
  <head META http-equiv="content-type" content="text/html; charset=iso-8859-2"><title>szukaj lekow</title>
  </head>
  <body>
  <?php
  $iCon = mysql_pconnect('localhost', 'nzoz_kp', 'pyr0blast');
  mysql_select_db('nzoz_kp', $iCon);
  $zapytanie = "SELECT `nazwa_lek`, `postac_lek`, `dawka_lek`, `opakowanie_lek` FROM leki WHERE nazwa_lek LIKE '".$_GET['search']."%' LIMIT 10";
  $result = mysql_query($zapytanie);
  while ($row = mysql_fetch_array($result, MYSQL_BOTH)) {
  print($row['nazwa_lek'].$row['postac_lek'].$row['dawka_lek'].$row['opakowanie_lek']." n");
  }
  mysql_free_result($result);
  ?>
  </body>
  </html>

autor: Cerber | 138 | 2009-03-19 12:25:54

Plik może niszczyć kodowanie, zobacz co jest w bazie czy tam widac polskie znaki jeśli tak użyj tej lini kodu której dałem lecz proceduralnie bo łączysz się poprzez mysql a nie obiektowo mysqli i dostosuj kodowanie jeśli nie to wes przepuść to co ma wyświetlać przez funckje iconv opisaną u nas po polsku http://funkcje.net/view/3/1/2115/index.html

Zobacz kod dodany do tego wpisu
- $db = mysql_connect('localhost','logint','haslo');
  //tu ustawiamy kodowanie latin1, latin2, utf8
  mysql_query("SET NAMES 'latin1'");

autor: Igor | 139 | 2009-03-19 14:53:47

Bardzo dobry zestaw skryptów, ALE: kiedy wybieram wartość, to ta wartość jest przekazywana do pola tekstowego. A co jeśli jednak nie chcę jej wybrać? Okienko warstwy pozostaje cały czas wyświetlone. Jak je zamknąć? Może użyć zdarzenia "onblur"? Macie jakieś rozwiązanie na to? itepe(@)vip.wp.pl

autor: itepe | 153 | 2009-04-04 20:19:37

Możesz dodać np napisz zamknij okienko i dać mu na onclick zdarzenie zamykające okno czyli style.display="none"; to najprostsze rozwiązanie

autor: Igor | 154 | 2009-04-05 20:02:19

Artykuł pierwsza klasa - bardzo mi pomógł. Ale funkcja escape() nie radzi sobie z kodowaniem utf8 (obcina polskie znaki) i wyszukiwanie wtedy działa nieprawidłowo. Zmieniłem ją na funkcję encodeURI() i teraz jest OK.

autor: Adam | 189 | 2009-05-16 15:12:30

dobra robota! wszytko ladnie dziala.mam tylko pytanko:jak mozna sie pozbyc spacji na koncu stringa?

autor: gienek | 208 | 2009-05-25 14:10:31

hmm widze ze ta spacja jest celowa zeby "chmurka" zniknela po wyborze.. ps jezeli mozna prosic autora o "lopatologicznie" wytlumacznie co gdzie i jak dodac opcje "zamknij" zeby miec mozliwosc zamkniecia okienka bez wyboru z gory dzieki

autor: gienek | 209 | 2009-05-25 14:16:43

ze spacja sobie poradzilem: $str .= $wiersz['title']." \n"; $str .= $wiersz['title']."\n";

autor: gienek | 210 | 2009-05-25 14:28:23

Kod zamykający podpowiedź jeśli brak wyniku, to nowa fersja funkcji showResponse wystarczy to podmienić w pliku javaScript i gotowe

Zobacz kod dodany do tego wpisu
- function showResponse(text){
  if(text.responseText==''){
  var search_suggest = document.getElementById("search_suggest");
  search_suggest.style.visibility = "visible";
  var ss = document.getElementById('search_suggest');
  ss.innerHTML = '';
  }else{
  var search_suggest = document.getElementById("search_suggest");
  search_suggest.style.visibility = "visible";
  var ss = document.getElementById('search_suggest');
  ss.innerHTML = '';
  var str = text.responseText.split("n");
  for(i=0; i < str.length - 1; i++)
  { var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
  suggest += 'onmouseout="javascript:suggestOut(this);" ';
  suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
  suggest += 'class="suggest_link">' + str[i] + '</div>';
  ss.innerHTML += suggest;
  }
  }
  }

autor: Igor | 215 | 2009-05-25 15:09:51

poprawiona linia: var str = text.responseText.split("\n");. nie znam sie na js mozna by powiedziec wcale, ale nie widze roznicy miedzy pierwszym warunkiem a drugim po else, poza tym bardziej chodzi o przycisk "zamnkij" ktory zamknie podpowiedzi na zadanie uzytkownika. Dzieki za pomoc i pozdrawiam

autor: gienek | 226 | 2009-05-26 09:26:02

Nie linia a cała funkcja, jest różnica w warunku jak masz ze jak jest pusta odp od php to sie zamyka podpowiedz a zwykły zamknij to napisz funkcje o treści : document.getElementById("search_suggest").style.visibility = "hidden"; koniec

Zobacz kod dodany do tego wpisu
- //tu masz jak zrobić link
  <a href="javascript:zamknij()">Zamknij</a>
  
  //tu jak zrobić funkcje
  function zamknij(){
  document.getElementById("search_suggest").style.visibility = "hidden";
  }

autor: Igor | 228 | 2009-05-26 20:07:37

Oto przykładowy CSS dla tego skryptu

Zobacz kod dodany do tego wpisu
- #search fieldset {
  margin: 0;
  padding: 0;
  border: none;
  }
  #search legend {
  display: none;
  }
  .search {
  background:url("images/search.gif");
  border:none;
  background-repeat:no-repeat;
  width:94px;
  height:21px;
  cursor:pointer;
  }
  
  .suggest_link {
  background-color: #f9f8f0;
  padding: 2px 6px 2px 6px;
  border-bottom: #E9E9E9 solid 1px;
  padding:5px 5px 5px 5px;
  }
  .suggest_link_over {
  background-color: #ffffff;
  padding: 2px 6px 2px 6px;
  cursor:pointer;
  border-bottom: #E9E9E9 solid 1px;
  padding:5px 5px 5px 5px;
  }
  #search_suggest {
  width:208px;
  position: absolute;
  background-color: #FFFFFF;
  text-align: left;
  border: #edebd5 solid 1px;
  visibility:hidden;

autor: Igor | 392 | 2009-07-30 16:08:02

Obcina PL ogonki, dzeiki Adam za rade - trzeba zmieniec funkcje escape na encodeURI

autor: Berez | 4338 | 2009-11-12 23:51:12

Nie chce "szukać" mi wyników. Sprawdziłem błędy w firebugu i wyskakuje mi : (załącznik) co z tym zrobić?

Zobacz kod dodany do tego wpisu
- missing } after function body
  [Wstrzymuj na tym błędzie] /* Prototype JavaScript framework, ve...---------------*/Element.addMethods();
  prototype.js (wiersz 1)
  
  missing ; before statement
  [Wstrzymuj na tym błędzie] function searchSuggest(){;var str = es...yId('search_suggest').innerHTML = '';}