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.
It worths to mention that in facebook u can also search by initials. For example: if u entered “u a” it will display united arab emirates.
You can also do that with that plugin it all depends on your search algorithm in your search url or page ..
45 views in only half a day .. this is Good = ]
Thanks for the script, it is working like a charm!
Is it possible to work with multiple fields on one page?
Hi
I didn’t try it on multiple fields in one page to be honest … but i cant find any problems doing that
it is just the same code being called twice … have you tried it and found any errors ? may be i can help
by the way i have 600 view now only in one month
Dear Abdel-Rahman,
Working with fromvegas’ script for autocomplete and can’t get it working for multiple input fileds. Can you help me out please?!
Brgds,
Homanp
Superbly illuinmaitng data here, thanks!
I have tried, but it is not working for me. It only works on the first one you call. I think it has to do with the variables you set in your script.
You need to update JS file for other Server-solutions (non-ASP). For example, in PHP i can send in response only set of div’s with class “unselected”, I don’t need no parent DIV with ID “divAutoCompleteSearch” etc.
In jquery.autocomplete.js I’ve made changes. From line 85 I have now:
success: function (html) {
if (html.length > 0) {
// update the results div
divResults.html(html);
divResults.highlight(searchWord);
divResults.css(“display”, “block”);
……
And it works great
Thanks for other functional of your plugin!
Thanks for feed back will update that in next release good to know people using it ; – )
Alex-
I’m also trying to implement the plugin in PHP. Are there any other changes that I need to make to the js file? Also does the closing brace go after divResults.css(“display”, “block”) or does it go at the end of the function (around line 129)?
I think we should ask Alex http://www.facebook.com/alexkvak he is more into the php i never worked with it so i hardly know how he have done ….
Do you have the VB version of this example?
unfortunately i dont but you can use one of the free tools converting C# to VB … for example http://www.developerfusion.com/tools/convert/csharp-to-vb/ … cheers
No offense but you gripe about the shorting comings of another developer’s script then write yours in a TOTALLY differenet programming language. This is hardly “improving” on something unless you are reaching out to aspx developers only
i am sorry John i promise to look into making this better when doing the next time just have lot happening cant release now
helo…i am searching just like your script. I found it on 9lessons.info but there are so many things that it not considered.
your script is awesome but plz give this in php bcz php is highly recommended . I also.
thnx yogimits@gmail.com
Hi! I’ve made a great improvement to this! Though it’s simple it fixed a lot.
Whenever you type, you keep sending requests to the server, so when this return, the results list blinks because it’s refreshed everytime.
In order to avoid this (and make it more Facebook-ish) i’v added the following lines of code:
on the variables declaration add this:
var ajaxRequest;
Then, before the ajax call, we check if there is one still active, and abort it
if (ajaxRequest != null)
{
ajaxRequest.abort();
ajaxRequest = null;
}
Finally, assign the ajaxRequest to the variable, on the ajax call:
ajaxRequest = $.ajax({
I hope it improves it! Cheers!
[...] search box Attraverso questo plugin è possibile ricreare una maschera di ricerca avente le stesse caratteristiche della ricerca su [...]
[...] search box Attraverso questo plugin è possibile ricreare una maschera di ricerca avente le stesse caratteristiche della ricerca su [...]
First of all thanks for making the search plugin. I have just one concern though. Please rectify the spelling of countries man. You are professional. And even if you’re not an English or American, you should do it right.
Example from what I’ve observed :
1. Australia became Austerlia
2. United Arab Emirates became United Arab Emirated
3. Germany became Gernmany
4. Ireland became Irland
It’s not really good so you should make it right man. Thanks! And Long live from the Philippines!
Good work mate.. CHeers!
[...] [...]
I was {recommended|suggested} this {blog|website|web site} by my cousin. {I am|I’m} not sure whether this post is written by him as {no one|nobody} else know such detailed about my {problem|difficulty|trouble}. {You are|You’re} {amazing|wonderful|i…
Great blog here! Also your website loads up very fast! What host are you using? Can I get your affiliate link to your host? I wish my site loaded up as quickly as yours lol…
[...] More Information on facebook search box [...]