Live Search z PHP i AJAX

AJAX może dostarczyć użytkownikom bardziej przyjazne i interaktywne doświadczenie wyszukiwania.

AJAX Live Search

W poniższym przykładzie AJAX pokażemy wyszukiwanie w czasie rzeczywistym.

Wyszukiwanie w czasie rzeczywistym ma wiele zalet w porównaniu do tradycyjnego wyszukiwania:

  • Pokazanie wyników dopasowanych podczas wpisywania danych
  • Filtrowanie wyników w miarę wpisywania danych
  • Jeśli wyniki są zbyt skromne, usunięcie znaków może uzyskać szerszy zakres

W polu tekstowym poniżej wyszukaj strony CodeW3C.com

Ten przykład zawiera cztery elementy:

  • Prosty HTML formularz
  • JavaScript
  • Strona PHP
  • Dokument XML

W tym przykładzie wyniki znajdują się w dokumencie XML (links.xml) gdzie są prowadzone wyszukiwania. Aby przykładowy przykład był mały i prosty, dostarczamy tylko 8 wyników.

HTML formularz

To jest strona HTML. Zawiera prosty formularz HTML, CSS style dla tego formularza oraz link do JavaScript:

<html>
<head>
<script src="livesearch.js"></script> 
<style type="text/css"> 
#livesearch
  { 
  margin:0px;
  width:194px; 
  }
#txt1
  { 
  margin:0px;
  } 
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)"
<div id="livesearch"></div>
</form>
</body>
</html>

Przykład wyjaśniający - HTML formularz

Jak widać, strona HTML zawiera prosty formularz HTML, w którym pole tekstowe ma nazwę "txt1".

Działanie formularza:

  1. Kiedy użytkownik wciska i puuszcza klawisz w polu tekstowym, wywoływane jest zdarzenie
  2. Kiedy zdarzenie jest wywoływane, wykonywana jest funkcja o nazwie showResult()
  3. Poniżej formularza znajduje się element <div> o nazwie "livesearch". Służy on jako占位符 dla danych zwróconych przez funkcję showResult()

JavaScript

JavaScript kod jest przechowywany w pliku "livesearch.js", który jest połączony z dokumentem HTML:

var xmlHttp
function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 Zwróć
 }
xmlHttp=GetXmlHttpObject()
jeśli (xmlHttp == null)
 {
 alert("Przeglądarka nie obsługuje żądań HTTP")
 Zwróć
 }
var url = "livesearch.php"
url = url + "?q=" + str
url = url + "&sid=" + Math.random()
xmlHttp.onreadystatechange = stateChanged 
xmlHttp.open("GET", url, true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
jeśli (xmlHttp.readyState == 4 lub xmlHttp.readyState == "complete")
 { 
 document.getElementById("livesearch").
 innerHTML = xmlHttp.responseText;
 document.getElementById("livesearch").
 style.border = "1px solid #A5ACB2";
 } 
}
function GetXmlHttpObject()
{
var xmlHttp = null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp = new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
Zwróć xmlHttp;
}

Przykład wyjaśnienia:

GetXmlHttpObject z Żądania AJAX z PHP Z przykładami takie same.

Funkcja showResult()

Funkcja jest wykonywana za każdym razem, gdy wprowadzany jest jeden znak do pola tekstowego

Jeśli w polu tekstowym nie ma wejścia (str.length == 0), funkcja ustawia pole zwracane na puste i usuwa wszelkie otoczenia

Jednak, jeśli w polu tekstowym znajduje się wejście, funkcja wykonuje:

  1. Zdefiniuj url (nazwę pliku) wysyłany do serwera
  2. Dodaj parametr (q) zawierający treść pola wejściowego do url
  3. Dodaj losową liczbę, aby zapobiec użyciu pliku pamięci podręcznej serwera
  4. Wywołaj funkcję GetXmlHttpObject, aby utworzyć obiekt XMLHTTP i powiadom tę funkcję, aby wykonać funkcję o nazwie stateChanged
  5. Użyj podanego url, aby otworzyć obiekt XMLHTTP
  6. Wysyłanie żądania HTTP do serwera

funkcja stateChanged()

Ta funkcja jest wykonywana za każdym razem, gdy stan obiektu XMLHTTP zmienia się.

Kiedy stan zmienia się na 4 (lub "complete"), treść pola txtHint jest wypełniana tekstem odpowiedzi i wokół niego ustawiana ramka.

Strona PHP

Strona serwerowa wywoływana przez kod JavaScript to plik PHP o nazwie "livesearch.php".

"livesearch.php" sprawdza ten dokument XML "links.xml", który zawiera tytuły i URL-y niektórych stron codew3c.com.

Te kody przeszukują plik XML w poszukiwaniu tytułów pasujących do ciągu wyszukiwania i zwracają wyniki w formacie HTML:

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//pobierz parametr q z adresu URL
$q=$_GET["q"];
//wyszukaj wszystkie linki z pliku xml jeśli długość q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
 {
 $y=$x->item($i)->getElementsByTagName('title');
 $z=$x->item($i)->getElementsByTagName('url');
 if ($y->item(0)->nodeType==1)
  {
  //znajdź link pasujący do tekstu wyszukiwania
  if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
   {
   if ($hint=="")
    {
    $hint="<a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   else
    {
    $hint=$hint . "<br /><a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   }
  }
 }
}
//Ustaw wyjście na "no suggestion", jeśli nie znaleziono wskazówek
// lub do poprawnych wartości
if ($hint == "")
 {
 $response="no suggestion";
 }
else
 {
 $response=$hint;
 }
//Wypisz odpowiedź
echo $response;
?>

Przykład wyjaśnienia:

Jeśli z JavaScript przysłano jakikolwiek tekst (strlen($q) > 0), nastąpi:

  1. XML DOM obiekt tworzenia pliku "links.xml" w PHP
  2. Przeszukaj wszystkie elementy "title" (nodetypes = 1), aby znaleźć dopasowanie do danych przekazanych przez JavaScript
  3. Znaleziony link zawierający poprawny tytuł jest ustawiany jako zmienna "$response". Jeśli znaleziono więcej niż jeden dopasowanie, wszystkie dopasowania są dodawane do zmiennej
  4. Jeśli nie znaleziono dopasowań, zmienna $response jest ustawiana na "no suggestion"
  5. $result jest wyjściem wysyłanym do znacznika "livesearch"