Examples of real-time search PHP AJAX
AJAX can provide users with a more friendly, more interactive search experience.
AJAX Live Search
In the following examples, we will demonstrate a real-time search, you can get search results as you type data at the same time.
Real-time search with traditional search, compared with many advantages:
- When you type data, it will show the result of a match
- When continue typing data, filter results
- If the result is too small, you can delete the character to get a wider range
Enter in the text box below "HTML", searches containing HTML page:
Examples of the above results in an XML file ( links.xml to find) in. To make this example small and simple, we only offer 6 results.
Examples explain - HTML page
When a user in the above input box character performs "showResult ()" function. This function consists of "onkeyup" Trigger 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 explained:
If the input box is empty (str.length == 0), this function will clear livesearch placeholder content, and exit the function.
If the input box is not empty, then showResult () performs the following steps:
- Create XMLHttpRequest object
- Create function when the server is ready to perform the response
- File on the server to send requests
- Please note that adding to (contains input box) the end of the URL parameter (q)
PHP File
The above servers through JavaScript calling this page is called "livesearch.php" PHP file.
"Livesearch.php" source code search XML files that match the search string title, and returns the result:
<?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 to send any text (ie, strlen ($ q)> 0), occurs:
- Load the XML file to the new XML DOM object
- Through all <title> element in order to find matching text JavaScript preaching
- Set the correct URL and title "$ response" variable. If it finds more than one match, all matches will be added to the variable.
- If no match is found, put the $ response variable to "no suggestion".