PHP development basic tutorial AJAX real-time search

# 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

     
   
 
在下面的文本框中输入 "HTML"，搜索包含 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

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="" . $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 happens:

• PHP creates an XML DOM object of the "links.xml" file

• Traverse all //m.sbmmt.com/tags/tag-a.html //m.sbmmt.com/tags/tag-br.html //m.sbmmt.com/cssref/css3-pr-background.html //m.sbmmt.com/cssref/pr-border.html //m.sbmmt.com/jsref/jsref-obj-date.html //m.sbmmt.com/jsref/jsref-obj-array.html

  ---

  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:

  • Strlen(): Returns the length of the string

  • Stristr() : Search for the first occurrence of a string in another string