Live The Blog!: PHP AJAX Instant Search

This post is for shedding light on PHP-AJAX based live / instant search. This search can be used on web server that supports php scripts, it has the advantages of controlling what appears on the search results (i.e you select what is to be shown in the results), results are display almost instantly, you can control where the results are to be displayed & can customize the result's display with a additional css file. This search has 5 major parts :

Javascript
Input box
Result Division
PHP processor
XML results file

I will explain this code as I am writing it. First we will add the following script before the </head > of the document.

<script>
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>

Explanation - This script in the head tag will take the input from the user and will send it to the php file whenever we type something in the search bar and get the result back and display it in the results division.

Next we will add the following code to display the input box and the result division in the <body>...</body> tags. The onkeyup event triggers the script in the header.(You can add the result livesearch div separately at any location on the same page to display the search results there.)

<form>
<input type="text" size="30" onkeyup="showResult(this.value)" />
<div id="livesearch"></div>
</form>

For the next part we create a new file named livesearch.php with the following code that will process the live search by retrieving the results from the XML results file.

<?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;
?>

And now for the final step we create a links.xml file that will contain the results in the following format.

<pages>
<link><title>Result 1</title><url>http://www.result1.com</url></link>
<link><title>Result2</title><url> http://www.result2.com</url></link>
<link><title>Result3</title><url>http://www.result3.com</url></link>
</pages>

Source (External Link) - W3Schools

Live The Blog!

Pages

Saturday, December 7

PHP AJAX Instant Search

No comments:

Post a Comment