First i would like to thank fromvega for his super awsome work explaining Autocomplete plugin he made

I learned allot from his work and built over it adding some new functionalities and spicing it up

By adding some more good plug-in like highlight-3.yui,

So i was looking through the web searching for a good plug-in search box that is inspired by the contacts search box

In face book and the best plug-in i found was Facebook like Autosuggestion

It was a very good plug-in but i must say it didn’t have some functionalities like the important up/down arrow keys selections also it didn’t highlight the searched text in the suggestions list and when selecting one of the options it didn’t automatically redirect to a target page … Also one of the features i noticed that it didn’t clear the options if the we cleared the search box

So i decided to make my own plug-in that looks exactly the same like the face book search box … You don’t believe me here you go a screen shoot

Or you can try out the Online Demo

So i went through the development path and i wanted to make really simple as one line of code and this what it takes to make the autosuggestion search box now

$("#searchbox").AutoComplete("search.aspx?searchword=");

Very easy haaa ?

You can Visit the Plugin Offical Page on the JqueryPlugins

Or you can direclty Download Plugin

You can also get the source code for the Online Demo Code

So now let us go through step by step in order to use the plug-in

Step 1 : download the plug-in files

Step 2 : include them in the project

Step 3 : add reference to the right files in the html code

<link href="styles/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">google.load('jquery', '1.3.2');</script>

<script src="styles/js/jquery.autocomplete.js" type="text/javascript"></script>

<script src="styles/js/jquery.dimensions.js" type="text/javascript"></script>

<script src="styles/js/jquery.highlight-3.yui.js" type="text/javascript"></script>

Step 4 : create the html text box and give it ID let us say "DemoSearchBoxID"

Step 5 : add the script calling the plugin

$(function () { 

    $("#DemoSearchBoxID").AutoComplete("search.aspx?searchword="); 

});

Step 6 : develop the Asp.Net search Page in my case "search.aspx" which takes the parameter in the query string

search word having the value of the search box

This page will be called with ajax calls during each key up event of the search box, it should be very simple page to developed for experienced developer.

On the ajax call i am searching in the output result of the search page for a div with id "divAutoCompleteSearch"

And render its html content in the autosuggestions list

The divAutoCompleteSearch should contain list of result divs and each result div should contain two hidden fields with IDS "hdnValue " and "hdnUrl "

hdnValue = the value that will be copied to the search box when selecting this result

hdnUrl = the url the page will be redirected to when selecting this result

Example of the expected output html from the search.aspx

<div id="divAutoCompleteSearch">

  <div class="unselected">

    <input id="hdnValue" type="hidden" value='Egypt' />

    <input id="hdnUrl" type="hidden" value='http://targetUrl' />

    <img alt="" src='Egypt.jpg' width="45px" height="45px" />

    Egypt

  </div>

  <div class="unselected">

    <input id="hdnValue" type="hidden" value='Denmark' />

    <input id="hdnUrl" type="hidden" value='http://targetUrl' />

    <img alt="" src='Denmark.jpg' width="45px" height="45px" />

    Denmark

  </div>

</div>

As i said <div class="unselected"> can contain any html you want to display in the suggestions list any think will work as long as you have the two hidden fields included.

I hope that made it easier for you to use and you make a great use of this plug-in ,i will be happy if you do

You love the topic ? Let me hear what you think … Please give me your comments bellow or Retweet This

Cheers for all jQuery Users.