Esempio PHP - AJAX Live Search
AJAX può essere utilizzato per creare ricerche più intuitive e interattive.
Ricerca in tempo reale AJAX
L'esempio seguente mostrerà una ricerca in tempo reale, in cui ottieni risultati di ricerca durante la digitazione.
La ricerca dal vivo ha molti vantaggi rispetto alla ricerca tradizionale:
- I risultati vengono visualizzati durante la digitazione
- I risultati si restringono mentre continui a digitare
- Se i risultati diventano troppo limitati, rimuovi i caratteri per vedere un risultato più ampio
Cerca una pagina W3Schools nel campo di input sottostante:
I risultati nell'esempio sopra si trovano in un file XML ( links.xml ). Per rendere questo esempio piccolo e semplice, sono disponibili solo sei risultati.
Esempio spiegato - La pagina HTML
Quando un utente digita un carattere nel campo di input sopra, viene eseguita la funzione "showResult()". La funzione viene attivata dall'evento "onkeyup":
<html>
<head>
<script>
function showResult(str)
{
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.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>
Spiegazione del codice sorgente:
Se il campo di input è vuoto (str.length==0), la funzione cancella il contenuto del segnaposto di livesearch ed esce dalla funzione.
Se il campo di input non è vuoto, la funzione showResult() esegue quanto segue:
- Creare un oggetto XMLHttpRequest
- Creare la funzione da eseguire quando la risposta del server è pronta
- Invia la richiesta a un file sul server
- Si noti che un parametro (q) viene aggiunto all'URL (con il contenuto del campo di input)
Il file PHP
La pagina sul server chiamata dal JavaScript sopra è un file PHP chiamato "livesearch.php".
Il codice sorgente in "livesearch.php" cerca in un file XML i titoli che corrispondono alla stringa di ricerca e restituisce il risultato:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of 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) {
//find a link matching the search text
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>";
}
}
}
}
}
// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
$response="no suggestion";
}
else {
$response=$hint;
}
//output the response
echo $response;
?>
Se è presente del testo inviato da JavaScript (strlen($q) > 0), accade quanto segue:
- Carica un file XML in un nuovo oggetto DOM XML
- Scorri tutti gli elementi <title> per trovare corrispondenze dal testo inviato da JavaScript
- Imposta l'URL e il titolo corretti nella variabile "$response". Se viene trovata più di una corrispondenza, tutte le corrispondenze vengono aggiunte alla variabile
- Se non vengono trovate corrispondenze, la variabile $response viene impostata su "nessun suggerimento"