AJAX real-time search
AJAX provides users with a friendlier and more interactive search experience.
AJAX Live Search
In the following example, we will demonstrate a real-time search, and you can get the search results while you type the data.
Real-time search has many advantages over traditional search:
When data is entered, matching results will be displayed
Filter the results as you continue to type data
If there are too few results, remove characters to get a wider range
Enter "HTML" in the text box below to search for pages containing HTML:
The results in the above example are found in an XML file (links.xml). To keep this example small and simple, we only provide 6 results.
Explanation of examples - HTML page
When the user types characters in the input box above, the "showResult()" function will be executed. This function is triggered by the "onkeyup" 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>Source code explanation:
If the input box is empty (str.length== 0), this function will clear the contents of the livesearch placeholder and exit the function.
If the input box is not empty, then showResult() will perform the following steps:
Create XMLHttpRequest object
Create Function executed when the server response is ready
Sends a request to a file on the server
Please note the parameter (q) added to the end of the URL (Including the content of the input box)
PHP file
The server page called through JavaScript above is a PHP file named "livesearch.php" . The source code in
"livesearch.php" searches the XML file for titles that match the search string and returns the results:
<?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;
?>If JavaScript sends any text (i.e. strlen($q) > 0), this will happen:
Loading the XML file into a new XML DOM object
Loop through all <title> elements to find one that matches the text passed by the JavaScript
Set the correct URL and title in the "$response" variable. If more than one match is found, all matches are added to the variable.
If no match is found, set the $response variable to "no suggestion".
Recommended related video tutorials: "AJAX Tutorial"http://www.php.cn/course/list/ 25.html
