Loading:

Zaplanuj Przeprowadzke - Ściągnij Darmową Aplikację na Androida

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

Napisz Artykuł

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;
                               
}




Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=1589

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
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
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
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 = '';}
autor: baggy | 12597 | 2011-10-06 20:57:30


zmarnowana kasa. Zapłaciłem za coś co nie działa.
autor: mbierna | 12608 | 2011-10-22 14:49:16


    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors