Home > Article > Backend Development > PHP Example - Knowledge about AJAX real-time search
PHP Example - Knowledge about AJAX real-time search
- jackloveOriginal
- 2018-05-07 15:03:531264browse
AJAX can provide users with a more friendly and interactive search experience. This article will explain the relevant knowledge of AJAX real-time search.
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 you type in data, matching results will be displayed
When you continue to type in data, Filter the results
If there are too few results, delete 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 searched 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 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 (contains the content of the input box)
PHP file
The above paragraph The server page called via JavaScript is a PHP file named "livesearch.php". The source code in
"livesearch.php" searches the XML file for headers 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 sent any text (i.e. strlen($q) > 0), what will happen:
Load the XML file into a new XML DOM object
Traverse all b2386ffb911b14667cb8f0f91ea547a7 elements in order to find matching JavaScript The text passed
sets 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".
This article explains the relevant knowledge of AJAX real-time search in detail. For more learning materials, please pay attention to the php Chinese website.
Related recommendations:
About PHP Example - Interaction between AJAX and XML
About PHP - Between AJAX and MySQL Interaction
#About PHP - The connection between AJAX and PHP
The above is the detailed content of PHP Example - Knowledge about AJAX real-time search. For more information, please follow other related articles on the PHP Chinese website!