Autosuggest / Autocomplete script using PHP Ajax

Last updated on May 20th, 2016 at 03:57 pm

Auto complete / Autosuggestion script using PHP Ajax

, This script is written in PHP. AJAX and Some CSS script for adding an elegant look. Here we are not using any Database in the backend. Everything is displayed from the Array of data we have inside php. This is a very useful script for your website.
The php script will look like this, Here i have declared an array $a[] inside that you can see the data.

if (isset($_GET['q'])) {
        $a[]="Server";
$a[]="Apache";
$a[]="IIS";
$a[]="IHS";
$a[]="HTTP Server";
$a[]="Tomcat";
$a[]="Perl";
$a[]="PHP";
$a[]="ASP";
$a[]="ASPX";
$a[]="Jsp";
$a[]="Application";
$a[]="Performance";
$a[]="Informatica";
$a[]="Documentum";
$a[]="Cognos";
$a[]="Sharepoint";
$a[]="Google";
$a[]="EssBase";
$a[]="Yahoo";
$a[]="Linux";
$a[]="Apple";
$a[]="Mozilla";
$a[]="Firfox";
$a[]="Chrome";
$a[]="Internet Explorer";
$a[]="Robots";
$a[]="Feeds";
$a[]="Websites";
$a[]="HTML";
$a[]="Xhtml";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
      {
      if ($hint=="")
        {
		
        $hint='<li><a href="#" onclick="selected(this.innerHTML);">'.$a[$i].'</a></li>';
		
        }
      else
        {
		$add_me = '<li><a href="#" onclick="selected(this.innerHTML);">'.$a[$i].'</a></li>';
       $hint=$hint.$add_me;
	   //$hint=$a[$i];
        }
      }
    }
  }

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
  {
  $response="<li <a href='#'>no suggestion</a></li>";
  }
else
  {
  $response=$hint;
  }

//output the response
  echo $response;
exit;
}

This is the javascript for the ajax call

var myAjax = ajax();
function ajax() {
        var ajax = null;
        if (window.XMLHttpRequest) {
                try {
                        ajax = new XMLHttpRequest();
                }
                catch(e) {}
        }
        else if (window.ActiveXObject) {
                try {
                        ajax = new ActiveXObject("Msxm12.XMLHTTP");
                }
                catch (e){
                        try{
                                ajax = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e) {}
                }
        }
        return ajax;
}
function request(str) {
	//Don't forget to modify the path according to your theme
        myAjax.open("GET", "autosuggestion.php?q="+str);
        myAjax.onreadystatechange = result;
        myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		myAjax.send("q="+str);
        
}
function result() {
        if (myAjax.readyState == 4) {
                var liste = myAjax.responseText;
                var cible = document.getElementById('tag_update').innerHTML = liste;
               // document.getElementById('tag_update').style.display = "block";
        }
}
function selected(choice){
        var cible = document.getElementById('s');
        cible.value = choice;
        document.getElementById('tag_update').style.display = "none";
}

This is the CSS to add the style to our page.

#tag_update {
        display: block;
        border-left: 1px solid #373737;
        border-right: 1px solid #373737;
        border-bottom: 1px solid #373737;
        position:absolute;
        z-index:1;
}
#tag_update ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
#tag_update li{
        display:block;
        clear:both;
}
#tag_update a {
        width:134px;
        display: block;
        padding: .2em .3em;
        text-decoration: none;
        color: #fff;
        background-color: #1B1B1C;
        text-align: left;
}
#tag_update a:hover{
        color: #fff;
        background-color: #373737;
        background-image: none;
}

And at last not the least we have the form ready

<form method="get" id="searchform" action="display.php">
    <div>
        <input autocomplete="off" type="text" value="" name="s" id="s" onkeyup="request(this.value);"/>
        <input type="submit" id="searchsubmit" value="search" class="button" />
    </div><div id="tag_update"></div>
</form>

Here i have named my file as autosuggestion.php you are free to add your own name for the file but only one thing to be noted that you need to change the name here in the javascript area also

myAjax.open("GET", "<YOUR-FILE-NAME>?q="+str);

Once the form get the value from the PHP array we can direct the form to some other page.Here i have given form action as

action="display.php"

Here is the DEMO