Live Search / AutoComplete Using XML & PHP

Many a times, we need to build a search engine for our website, which can serve various purposes like searching through your site! In such cases, live search option is the most sought after, for the ease of searching!!

The code for live search can be broken down in three parts viz:

HTML file
PHP file
XML file

Stage 1:(HTML file)

Create an html file and paste the following code in it:

<html>
<title>Live Search</Title>
<head>
<script type="text/javascript">
function result(str)
{
if (str.length==0)
  {
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";
  return;
  }
if (window.XMLHttpRequest)
  {xmlhttp=new XMLHttpRequest();
  }
else
  {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="result(this.value)" />
<div id="livesearch">
</div>
</form>
</body>
</html>

Stage 2:(PHP file)

Create a php file 'livesearch.php' and paste the following code in it:

<?php
error_reporting(E_PARSE);

$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('table');

$q=$_GET["q"];
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
  {
  $z=$x->item($i)->getElementsByTagName('column');
  if ($z->item(0)->nodeType==1)
    {
    if (stristr($z->item(0)->childNodes->item(0)->nodeValue,$q))
      {
      if ($hint=="")
        {
        $hint="<a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue .
        "' target='_blank'>" .
        $z->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      else
        {
        $hint=$hint . "<br /><a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue .
        "' target='_blank'>" .
        $z->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}
if ($hint=="")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }
echo $response;
?>

Stage 3:(XML file)

Here you have two options:

Export the data from the database like MySQL in XML form.
Create an XML file yourself.

However, the 1st alternative turns out to be a good one, as you don't have to write the complex XML code...the job is done by MySQL!!

In our example, the exported XML code looks like this (links.xml):

<?xml version="1.0" encoding="utf-8"?>
<!--
Info about PHP & server version
-->

<pma_xml_export version="1.0" xmlns:pma="http://www.phpmyadmin.net/some_doc_url/">
    <!--
    - Structure schemas
    -->
    <pma:structure_schemas>
        <pma:database name="sphiderplus" collation="latin1_swedish_ci" charset="latin1">
            <pma:table name="links">
                CREATE TABLE `links` (
                  `url` varchar(1000) NOT NULL
                ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
            </pma:table>
        </pma:database>
    </pma:structure_schemas>

    <!--
    - Database: 'sphiderplus'
    -->
    <database name="sphiderplus">
        <!-- Table links -->
        <table name="links">
            <column name="url">http://ajinkyamandhare.blogspot.com/feeds/posts/
</column>
        </table>
<table name="links">
            <column name="url">http://ajinkyamandhare.blogspot.com/feeds/posts/default?alt=rss
</column>
        </table>
<table name="links">
            <column name="url">http://www.blogger.com/feeds/5359953784757764379/posts/default
</column>
        </table>
<table name="links">
            <column name="url">http://www.blogger.com/rsd.g?blogID=5359953784757764379
</column>
        </table>
<table name="links">
            <column name="url">http://www.blogger.com/openid-server.g
</column>
        </table>
<table name="links">
            <column name="url">http://uploading.com/files/531b5589/COA.rar/
</column>
        </table>
<table name="links">
            <column name="url">http://www.megaupload.com/?d=UVJ2HI4H
</column>
        </table>
<table name="links">
            <column name="url">http://www.megaupload.com/?d=KCEJCLG8
</column>
        </table>
<table name="links">
            <column name="url">http://www.megaupload.com/?d=2CMADC4H
</column>
        </table>
<table name="links">
            <column name="url">http://www.megaupload.com/?d=6F7UFCZ3
</column>
        </table>
<table name="links">
            <column name="url">http://www.blogger.com/styles/atom.css
</column>
        </table>
<table name="links">
            <column name="url">http://uploading.com/files/531b5589/COA.rar/
</column>
        </table>
<table name="links">
            <column name="url">http://www.megaupload.com/?d=UVJ2HI4H
</column>
        </table>
<table name="links">
            <column name="url">http://www.megaupload.com/?d=KCEJCLG8
</column>
        </table>
</database>
</pma_xml_export>

If you want to write the xml code by yourself, then I have uploaded the modified PHP & XML files in the download box present alongside.

Or, you can download it from the link https://www.box.net/shared/x0mbpldeyar2ra2ksvjf

Now, load the html file in browser in localhost, & see the magic happen!!!

Look out for my next post on "Live search using PHP only" (It is better for a huge database, and is relatively smaller than the one we have written here!!)

You can Contact Me for further assistance.