PHP AJAX Live Search Detailed ____php

AJAX provides users with a more user-friendly and interactive search experience. AJAX Live Search

In the following AJAX example, we will demonstrate a real-time search.

Real-time search has many advantages over traditional search: When you type data, the results are filtered when you continue typing the data if the result is too small, the deletion of the character will give you a wider range. search for W3school pages in the text box below

This example includes four elements: a simple HTML form JavaScript PHP page XML document

In this case, the result is found in an XML document (Links.xml). To make this example small and simple, we only provide 8 results. HTML Form

This is an HTML page. It contains a simple HTML form, a CSS style for this form, and links to JavaScript:

 
examples explain –html forms 
As you can see, the HTML page contains a simple HTML form with a text box named "Txt1″."

The form works like this: When the user presses the key in the text box and releases the key, an event is triggered when the event is triggered, the function form named Showresult () is executed with the <div> element named "LiveSearch" below. It serves as placeholder JavaScript for data returned by Showresult ()

The JavaScript code is stored in the "livesearch.js" connection to the HTML document:

var xmlHttp function Showresult (str) {if (str.length==0) {document.getElementById ("LiveSearch").
 Innerhtml= "";
 document.getElementById ("LiveSearch").
 style.border= "0px";

return} xmlhttp=getxmlhttpobject () if (xmlhttp==null) {alert (' Browser does not support HTTP Request ') return} var url= "livesearch.php" url=url+ "q=" +str url=url+ "&sid=" +math.random () xmlhttp.onreadystatechange=  StateChanged Xmlhttp.open ("Get", url,true) xmlhttp.send (NULL)} function statechanged () {if (xmlhttp.readystate==4 | |
 xmlhttp.readystate== "complete") {document.getElementById ("LiveSearch").
 Innerhtml=xmlhttp.responsetext;
 document.getElementById ("LiveSearch").
 Style.border= "1px solid #A5ACB2"; } function Getxmlhttpobject () {var xmlhttp=null; try {//Firefox, Opera 8.0+, Safari xmlhttp=new XMLHttpRequest ()
 ;
  catch (E) {//Internet Explorer try {xmlhttp=new ActiveXObject ("msxml2.xmlhttp"); catch (e) {xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
  } return xmlHttp; }
 
Example Explanation: 
Getxmlhttpobject is the same as the example in PHP and AJAX requests. Showresult () function

The function executes one character at a time when the text box is entered.

If there is no input in the text field (str.length = 0), the function sets the return field to null and removes any surrounding borders.

However, if there is input in the text field, the function executes: Defines the URL (file name) that is sent to the server adds a random number to the URL with the input box content (q) To prevent the server from using the cached file to invoke the Getxmlhttpobject function to create the XMLHTTP object and tells the function to execute a function called statechanged using the given URL to open the XMLHTTP object to send the HTTP request statechanged () function to the server

The function executes whenever the state of the XMLHTTP object changes.

When the state changes to 4 (or "complete"), the response text is used to populate the contents of the Txthint placeholder, and a border is set around the returned field. PHP Page

The server page called by JavaScript code is a php file named "livesearch.php".

The code in "livesearch.php" checks that XML document "Links.xml". The title and URL of some of the pages on the document w3school.com.cn.

The code searches for the title of the matching search string in the XML file and returns the result in HTML:

<?php $xmlDoc = new DOMDocument ();

$xmlDoc->load ("Links.xml");

$x = $xmlDoc->getelementsbytagname (' link ');

Get the Q parameter from URL $q =$_get["Q"]; Lookup all links from the XML file if length of q>0 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) {//find A link matching the search text if Stristr ($y->item (0)->childnod 
    Es->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>"; '}}}//Set output to ' no suggestion ' if no hint were found//or to the correct values if ($hint = = "") {$
 response= "no suggestion";
 else {$response = $hint; //output the response echo $response;?>
 
Example Explanation: 
If any text is sent from JavaScript (strlen ($q) > 0), it occurs: PHP creates an XML DOM object for the "Links.xml" file that traverses all "title" Elements (NodeTypes = 1) to find a match The name of the data that JavaScript passes finds link with the correct title and is set to the "$response" variable. If more than one match is found, all matches are added to the variable if no match is found, the $response variable is set to "no suggestion" $result is the output sent to the "LiveSearch" placeholder