facebook twitter youtube
in Ajax - 13 Mar, 2012, This Tutorial Has Been Viewed 15,157 Times.
by admin - one comment
Autosuggestion / Autocomplete script using PHP and Ajax
VN:F [1.9.22_1171]
Rating: 7.4/10 (15 votes cast)

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

VN:F [1.9.22_1171]
Rating: 7.4/10 (15 votes cast)
Autosuggestion / Autocomplete script using PHP and Ajax, 7.4 out of 10 based on 15 ratings

Incoming search terms:




coded by nessus

Leave a Reply

  • //20 Feb 2014

    Great coding. Useful information. nice explanation. I am learn for many information about your article. Thanks for sharing this information. http://www.dreamdestinations.in/

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
Close
Please support the site
By clicking any of these buttons you help our site to get better