# Ajax Real -time Search
## Ajax can provide users with a more friendly and interactive search experience.
# Examples
In the example below, we will demonstrate a real -time search. When you type the data .
- Real-time search has many advantages over traditional search:
- When data is entered, matching results will be displayed
- As you continue typing data, filter the results
- If there are too few results, delete characters to get a wider range
The output effect is shown on the right
The results in the above example are searched in an XML file (3.xml). To keep this example small and simple, we only provide 6 results.
This example includes three parts
- HTML form page
##PHP file
-
XML file
HTML form page
Source code 1.php is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showResult(str)
{
//如果输入框是空的（str.length==0），该函数会清空 livesearch 占位符的内容，并退出该函数
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
//输入框不是空的，则showResult() 会执行以下代码
//创建 XMLHttpRequest 对象
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","2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<!-- 键盘按键被松开时onkeyup 事件发生 ,调用showResult()函数-->
<form>
<p>在下面的文本框中输入 "HTML"，搜索包含 HTML 的页面：</p>
<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 content 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 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 called by JavaScript in the above paragraph The page is a PHP file named "2.php".
The source code in "2.php" will search the XML file for titles that match the search string and return the results:
See 2.php for the source code
<?php
//创建XML DOM对象
$xmlDoc=new DOMDocument();
//加载XML文件到新的XML DOM对象
$xmlDoc->load("3.xml");
//将标签名为“link”的对象的集合赋值给$x
$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)//元素的节点类型，1：元素节点，2：属性节点
{
// 找到匹配搜索的链接
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), what happens:
PHP creates an XML DOM object of the "links.xml" file
Traverse all <title> elements (nodetypes = 1) to find the text that matches the text passed by JavaScript
Find the link containing the correct title and set it For 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".
$response is the output sent to the "livesearch" placeholder
XML file
See 3.php
for the source code
<?xml version="1.0" encoding="UTF-8"?>
<pages>
<link>
<title>HTML a 标签</title>
<url>http://www.php.cn/tags/tag-a.html</url>
</link>
<link>
<title>HTML br 标签</title>
<url>http://www.php.cn/tags/tag-br.html</url>
</link>
<link>
<title>CSS background 属性</title>
<url>http://www.php.cn/cssref/css3-pr-background.html</url>
</link>
<link>
<title>CSS border 属性</title>
<url>http://www.php.cn/cssref/pr-border.html</url>
</link>
<link>
<title>JavaScript Date 对象</title>
<url>http://www.php.cn/jsref/jsref-obj-date.html</url>
</link>
<link>
<title>JavaScript Array 对象</title>
<url>http://www.php.cn/jsref/jsref-obj-array.html</url>
</link>
</pages>
Learning experience
This example mainly includes the following knowledge points:
Form basics
onkeyup Event: Occurs when the keyboard key is released
Function call, function value passing
Creation of AJAX XMLHttpRequest object, server response The function executed at the time, sends a request to the file on the server: see 1-5 for learning experience
HTML DOM getElementById() method: Returns the first object with the specified ID Quote
l XML related knowledge
Create XML DOM object
Load XML file to new XML DOM object
Get the object of a specific tag name: getElementsByTagName()
Get the child section collection of a specific element: HTML DOM childNodes
Get the node value of the first button element: HTML DOM nodeValue
Return the first child node of the element: HTML DOM item() method
Related functions:
Next Section