PHP en AJAX Live Search
- Vorige pagina AJAX responseXML
- Volgende pagina AJAX RSS Reader
AJAX biedt gebruikers een vriendelijker en interactievere zoekervaring.
AJAX Live Search
In the following AJAX example, we will demonstrate a real-time search.
Real-time search has many advantages over traditional search:
- Matching results are displayed as you type data
- Results are filtered as you continue to type data
- If there are too few results, deleting characters can get a wider range
Search for pages on CodeW3C.com in the following text box
This example includes four elements:
- Simple HTML form
- JavaScript
- PHP-pagina
- XML document
In this example, the results are in an XML document (links.xmlin the parentheses are searched. To keep this example small and simple, we only provide 8 results.
HTML Form
This is an HTML page. It includes a simple HTML form, the CSS styles for the form, and a link to the 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>
Example Explanation - HTML Form
As you can see, the HTML page contains a simple HTML form, with a text box named "txt1".
How the form works:
- An event is triggered when the user presses and releases a key in the text box
- When an event is triggered, the function named showResult() is executed
- Below the form is a <div> element named "livesearch". It is used as a placeholder for the data returned by showResult()
JavaScript
JavaScript code is stored in the "livesearch.js" file that is connected to the HTML document:
var xmlHttp
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").
innerHTML="";
document.getElementById("livesearch").
style.border="0px";
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert("Browser ondersteunt geen HTTP-verzoeken")
return
}
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()
{
if (xmlHttp.readyState==4 || 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");
}
}
return xmlHttp;
}
Voorbeeldverklaring:
GetXmlHttpObject en PHP en AJAX Verzoeken bevat dezelfde voorbeelden
De functie showResult()
Deze functie wordt uitgevoerd elke keer dat een character in het tekstvak wordt ingevoerd
Als er geen invoer in het tekstvak is (str.length == 0), stelt de functie het retourveld in op leeg en verwijdert elke rand eromheen
Maar als er invoer in het tekstvak is, voert de functie uit:
- Definieer de url (bestandsnaam) die naar de server wordt gestuurd
- Voeg de parameter (q) met de inhoud van het invoerveld toe aan de url
- Voeg een willekeurig getal toe om te voorkomen dat de server een cachebestand gebruikt
- Het oproepen van de functie GetXmlHttpObject om een XMLHTTP-object te maken en het te informeren dat een functie genaamd stateChanged moet worden uitgevoerd wanneer er een verandering wordt geactiveerd
- Open een XMLHTTP-object met de gegeven URL
- Verstuur een HTTP-verzoek naar de server
Functie stateChanged()
Deze functie wordt aangeroepen wanneer de status van het XMLHTTP-object verandert.
Wanneer de status 4 (of "complete") wordt, wordt de tekst van de respons gebruikt om de inhoud van de placeholder txtHint te vullen en een rand om het retourveld te zetten.
PHP-pagina
De serverpagina die door JavaScript-code wordt aangeroepen is een PHP-bestand genaamd "livesearch.php".
"livesearch.php" controleert die XML-document "links.xml". Dit document bevat titels en URL's van enkele pagina's op codew3c.com.
Deze code zoekt naar titels die overeenkomen met de zoekstring in de XML-bestand en retourneert resultaten in HTML:
<?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>";
}
}
}
}
}
// Stel de uitvoer in op "geen suggestie" als geen hint is gevonden
// Of naar de juiste waarden
if ($hint == "")
{
$response="geen suggestie";
}
else
{
$response=$hint;
}
// Output de respons
echo $response;
?>
Voorbeeldverklaring:
Als er enige tekst wordt verzonden van JavaScript (strlen($q) > 0), gebeurt het volgende:
- Een XML DOM-object voor het maken van het "links.xml"-bestand in PHP
- Alle "title"-elementen (nodetypes = 1) worden doorlopen om de naam te vinden die door JavaScript is doorgegeven
- Een link met de juiste titel wordt gevonden en ingesteld op de variabele "$response". Als er meer dan één overeenkomst wordt gevonden, worden alle overeenkomsten toegevoegd aan de variabele
- Als er geen overeenkomsten worden gevonden, wordt de variabele $response ingesteld op "geen suggestie"
- $result is de uitvoer die naar het "livesearch"-placeholder wordt gestuurd
- Vorige pagina AJAX responseXML
- Volgende pagina AJAX RSS Reader
