AJAX :: Live Search

AJAX can be used to create more user-friendly and interactive searches.

---

AJAX Live Search

The following example will demonstrate a live search, where you get search results while you type.
Live search has many benefits compared to traditional searching:

• Results are shown as you type
• Results narrow as you continue typing
• If results become too narrow, remove characters to see a broader result

Search for a W3Schools page in the input field below:

The results in the example above are found in an XML file (links.xml). To make this example small and simple, only eight results are available.

---

Example Explained - The HTML Page

When a user types a character in the input field above, the function "showResult()" is executed. The function is triggered by the "onkeyup" event:

<html> <head> <script type="text/javascript"> function showResult(str) { if (str.length==0)   {   document.getElementById("livesearch").innerHTML="";   document.getElementById("livesearch").style.border="0px";   return;   } if (window.XMLHttpRequest)   {// code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest();   } else   {// code for 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 code explanation:
If the input field is empty (str.length==0), the function clears the content of the livesearch placeholder and exits the function.
If the input field is not empty, the showResult() function executes the following:

• Create an XMLHttpRequest object
• Create the function to be executed when the server response is ready
• Send the request off to a file on the server
• Notice that a parameter (q) is added to the URL (with the content of the input field)

---

The PHP File

The page on the server called by the JavaScript above is a PHP file called "livesearch.php".
The source code in "livesearch.php" searches an XML file for titles matching the search string and returns the result:

<?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)->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>";         }       }     }   } } // 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; ?>

If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:

• Load an XML file into a new XML DOM object
• Loop through all <title> elements to find matches from the text sent from the JavaScript
• Sets the correct url and title in the "$response" variable. If more than one match is found, all matches are added to the variable
• If no matches are found, the $response variable is set to "no suggestion"

PHP XML :: DOM

What is DOM?

The W3C DOM provides a standard set of objects for HTML and XML documents, and a standard interface for accessing and manipulating them.

The W3C DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):

* Core DOM - defines a standard set of objects for any structured document
* XML DOM - defines a standard set of objects for XML documents
* HTML DOM - defines a standard set of objects for HTML documents

---

XML Parsing

To read and update - create and manipulate - an XML document, you will need an XML parser.

There are two basic types of XML parsers:

• Tree-based parser: This parser transforms an XML document into a tree structure. It analyzes the whole document, and provides access to the tree elements
• Event-based parser: Views an XML document as a series of events. When a specific event occurs, it calls a function to handle it

The DOM parser is an tree-based parser.

Look at the following XML document fraction:

<?xml version="1.0" encoding="ISO-8859-1"?> <from>Jani</from>

The XML DOM sees the XML above as a tree structure:

• Level 1: XML Document
• Level 2: Root element: <from>
• Level 3: Text element: "Jani"

---

Installation

The DOM XML parser functions are part of the PHP core. There is no installation needed to use these functions.

---

An XML File

The XML file below will be used in our example:

<?xml version="1.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>

---

Load and Output XML

We want to initialize the XML parser, load the xml, and output it:

Example

<?php $xmlDoc = new DOMDocument(); $xmlDoc->load("note.xml"); print $xmlDoc->saveXML(); ?>

The output of the code above will be:

Tove Jani Reminder Don't forget me this weekend!

If you select "View source" in the browser window, you will see the following HTML:

<?xml version="1.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>

The example above creates a DOMDocument-Object and loads the XML from "note.xml" into it.

Then the saveXML() function puts the internal XML document into a string, so we can output it.

---

Looping through XML

We want to initialize the XML parser, load the XML, and loop through all elements of the <note> element:

Example

<?php $xmlDoc = new DOMDocument(); $xmlDoc->load("note.xml"); $x = $xmlDoc->documentElement; foreach ($x->childNodes AS $item)   {   print $item->nodeName . " = " . $item->nodeValue . "<br />";   } ?>

The output of the code above will be:

#text = to = Tove #text = from = Jani #text = heading = Reminder #text = body = Don't forget me this weekend! #text =

In the example above you see that there are empty text nodes between each element.

When XML generates, it often contains white-spaces between the nodes. The XML DOM parser treats these as ordinary elements, and if you are not aware of them, they sometimes cause problems.