PHP example - AJAX real-time search

PHP Example - AJAX Real-time Search

AJAX can provide users with a more friendly and 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 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:

Source code explanation:

If the input box is empty (str.length==0), this function will clear the livesearch placeholder content 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 titles that match the search string and returns the results:

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="" . $y->item(0)->childNodes->item(0)->nodeValue . ""; } else { $hint=$hint . "
" . $y->item(0)->childNodes->item(0)->nodeValue . ""; } } } } } // 如果没找到则返回 "no suggestion" if ($hint=="") { $response="no suggestion"; } else { $response=$hint; } // 输出结果 echo $response; ?>

If JavaScript sends any text (i.e. strlen($q ) > 0), what will happen:

Load the XML file into a new XML DOM object

Traverse all