Il miglior tutorial Esempi di ricerca in tempo reale PHP AJAX Nel 2024, in questo tutorial puoi imparare AJAX Live Search,pagina HTML - Esempi spiegano,PHP file,
AJAX in grado di fornire agli utenti un più amichevole esperienza di ricerca, più interattiva.
Negli esempi che seguono, ci prova di una ricerca in tempo reale, si possono ottenere risultati di ricerca durante la digitazione di dati allo stesso tempo.
ricerca in tempo reale con la ricerca tradizionale, a fronte di molti vantaggi:
Inserisci nella casella di testo sotto "HTML", le ricerche contenenti pagina HTML:
Esempi dei risultati di cui sopra in un file XML ( links.xml per trovare) in. Per fare questo esempio, piccola e semplice, offriamo solo 6 risultati.
Quando un utente in quanto sopra carattere casella di input esegue "showResult) (" la funzione. Questa funzione è costituito da "onkeyup" Trigger Event:
<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>
Fonte ha spiegato:
Se la casella di input è vuota (str.length == 0), questa funzione si cancellerà il contenuto segnaposto LiveSearch, e uscire dalla funzione.
Se la casella di input non è vuota, allora showResult () esegue le seguenti operazioni:
I server di cui sopra attraverso JavaScript chiamando questa pagina è chiamato file PHP "livesearch.php".
"Livesearch.php" file XML di ricerca il codice sorgente che corrispondono il titolo stringa di ricerca, e restituisce il risultato:
<?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; ?>
Se JavaScript per inviare qualsiasi testo (ad esempio, strlen ($ q)> 0), si verifica: