Przykłady w czasie rzeczywistym wyszukiwarka PHP AJAX
AJAX może dostarczyć użytkownikom bardziej przyjazne, bardziej interaktywnym doświadczeniem wyszukiwania.
AJAX Live Search
W poniższych przykładach będziemy wykazywać wyszukiwanie w czasie rzeczywistym, można uzyskać wyniki wyszukiwania w trakcie wpisywania danych w tym samym czasie.
Wyszukiwanie w czasie rzeczywistym w poszukiwaniu tradycyjnego, w porównaniu z wieloma zaletami:
- Po wpisaniu danych, pokaże wynik meczu
- Gdy kontynuować wpisywanie danych, wyniki filtrowania
- Jeżeli wynik jest zbyt mała, można usunąć znak, aby uzyskać szerszy zakres
Wpisz w polu tekstowym poniżej "html", wyszukiwania zawierające strony HTML:
Przykłady powyższych wyników w pliku XML ( links.xml do znalezienia) In. Aby ten przykład małe i proste, mamy tylko 6 wyników.
Przykłady wyjaśnić - strony HTML
Gdy użytkownik w powyższej postaci pola wejściowego wykonuje "showResult ()" funkcji. Funkcja ta polega na "onkeyup" wyzwalacza zdarzeń:
<html>
<head>
<script>
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 浏览器执行
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
Źródło wyjaśnił:
Jeśli pole wejściowe jest pusta (str.length == 0), funkcja ta spowoduje wyczyszczenie zawartości livesearch zastępczy, a wyjście z funkcji.
Jeśli pole wejściowe nie jest pusty, to showResult () wykonuje następujące czynności:
- Tworzenie obiektu XMLHttpRequest
- Tworzenie funkcji, gdy serwer jest gotowy do przeprowadzenia reakcji
- Plików na serwerze, aby wysyłać żądania
- Należy pamiętać, że dodanie do (zawiera pole wejściowe) do końca parametru URL (Q)
Plik PHP
Powyższe serwery poprzez javascript wywołaniem tej strony jest nazywany "livesearch.php" plik PHP.
"Livesearch.php" szukaj kod źródłowy plików XML pasujących tytuł wyszukiwania ciąg i zwraca wynik:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
// 从 URL 中获取参数 q 的值
$q=$_GET["q"];
// 如果 q 参数存在则从 xml 文件中查找数据
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)
{
// 找到匹配搜索的链接
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>";
}
}
}
}
}
// 如果没找到则返回 "no suggestion"
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
// 输出结果
echo $response;
?>
Jeśli obsługa JavaScript, żeby wysyłać wiadomości tekstowe (np strlen ($ q) 0>) następuje:
- Załaduj plik XML do nowego obiektu XML DOM
- Przez wszystkie <title> elementu w celu znalezienia dopasowania tekstu JavaScript głoszenie
- Ustaw prawidłowy adres URL i tytuł zmiennej "$ odpowiedzi". Jeżeli stwierdzi się więcej niż jednego mecz, wszystkie mecze będą dodawane do zmiennych.
- Jeśli nie zostanie znaleziony, umieścić zmienną $ odpowiedzi na "nie wskazuje".