WordPress categories Auto complete script using PHP ajax

This is a simple script that will automatically display suggestions near the input box when the user start typing words/letters similar to that inside a database/text file/xml.
Here i am using mysql as my back end data provider.
For this i am also getting some data from wordpress. I am displaying the wordpress tags as output in the suggestion area. PHP ajax and some CSS will make the script look elegant.
Here instead of wordpress tags you are very much free to use any back end data for example from a text file, or xml or even some other mysql table, according to your flexibility.

The major one is the php script. This is how it looks

if (isset($_POST['search'])) {
        $search = htmlentities($_POST['search']);

$db = mysql_connect('HOSTNAME','USERNAME','PWD'); //Don't forget to change
mysql_select_db('WP+DATABASE', $db);		     //theses parameters
$sql = "SELECT name from wp_terms WHERE name LIKE '$search%'";
$req = mysql_query($sql) or die();
echo '<ul>';
while ($data = mysql_fetch_array($req))
{
      echo '<li><a href="#" onclick="selected(this.innerHTML);">'.htmlentities($data['name']).'</a></li>';
}
echo '</ul>';
mysql_close();
exit;
}

The AJAX / Javascript

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("POST", "gettags.php");
        myAjax.onreadystatechange = result;
        myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        myAjax.send("search="+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";
}

Some CSS code

#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;
}

The HTML Part looks like this, its a simple Form.

<form method="post" id="searchform" action="gettags.php">
    <div>
        <input 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>

Just put all these scripts on to a file and save it as gettags.php.Thats it 🙂
If you want to disable textbox input history please add this insdie the tag of the form.

 <input autocomplete="off" type="text" value="" name="s" id="s" onkeyup="request(this.value);"/>

DEMO

Incoming search terms:

• autosuggest ajax mysql faster (4)
• suggest a site (3)
• auto suggestion search script php (2)
• ajax autosuggest textbox in jsp (1)
• jQuery auto search using php mysql (1)
• jquery simple auto suggest (1)
• jquery type fast hit tab auto suggest (1)
• multiple tagging thorugh ajax in php (1)
• php auto suggest for multiple input (1)
• php how to make automatic suggesting of search database (1)
• php search script with auto typiing (1)
• sample form suggestion of using kardex (1)
• simple ajax auto suggestion with javascript in php (1)
• simple auto suggest ajax (1)
• javascript auto suggest input (1)
• inputSuggestAjax (1)
• how to create auto suggestions form in php (1)
• ajax php search auto display (1)
• auto suggest on default search in wordpress (1)
• auto suggestion javascript (1)
• auto suggestion use ajax (1)
• auto suggestion using simple javascript and php (1)
• auto update select using css code (1)
• auto username suggestions php (1)
• easy ajax auto suggestion javascript (1)
• easy auto search ajax (1)
• easy auto suggest input form in php ajax (1)
• how to block script tag from title in wordpress (1)
• terriblewfp (1)