AJAX can provide users with a more friendly and interactive search experience
In the following example, we will demonstrate a real-time search, and the search results can be obtained while you type the data
Compared with traditional search, real-time search has many advantages:
When typing data, matching results will be displayed
When you continue to typing data, the matching results will be displayed. Filter the results
If there are too few results, delete characters to get a wider range
Please see the following case
First we create a head.xml and the code is as follows
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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","demo.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>Next we write the php file, the code is as follows:
<?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;
?>Note:
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 an XMLHttpRequest object
Create a function that is executed when the server response is ready
Send a request to the file on the server
Please pay attention to the parameter (q) added to the end of the URL (including the content of the input box)
You need to create a new links.xml and put it in the same file In the level directory, the code is as follows:
<?xml version="1.0" encoding="UTF-8"?> <pages> <link> <title>HTML a 标签</title> <url>//m.sbmmt.com/tags/tag-a.html</url> </link> <link> <title>HTML br 标签</title> <url>//m.sbmmt.com/tags/tag-br.html</url> </link> <link> <title>CSS background 属性</title> <url>//m.sbmmt.com/cssref/css3-pr-background.html</url> </link> <link> <title>CSS border 属性</title> <url>//m.sbmmt.com/cssref/pr-border.html</url> </link> <link> <title>JavaScript Date 对象</title> <url>//m.sbmmt.com/jsref/jsref-obj-date.html</url> </link> <link> <title>JavaScript Array 对象</title> <url>//m.sbmmt.com/jsref/jsref-obj-array.html</url> </link> </pages>
