AJAX real-time search

AJAX provides users with a friendlier and more 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 data is entered, matching results will be displayed

• Filter the results as you continue to type data

• If there are too few results, remove 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 found 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 contents of the livesearch placeholder and exit the function.

If the input box is not empty, then showResult() will perform the following steps:

• Create 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 page called through JavaScript above 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), this will happen:

• Loading the XML file into a new XML DOM object

• Loop through all