Autocomplete for JQuery.js

Ajax Powered Autocomplete Plugin for JQuery.js

The Prototype.js version was so successfull that I had to this for JQuery, which is the library I am using the most at the moment. I have to say that the plugin works even better than the original version and in terms of coding, was easier to develop.
Its functionality is exactly the same as the mentioned one for Prototype.js:
  • Icon Notifier (Spinner between Ajax calls)
  • Fire onAjaxFailure events when an error occurs during Ajax calls
  • Be able to set a custom width
  • A more flexible and dynamic creation of the autocomplete text field

The object is pretty complete but it could be nice to include more features. Here some of them:

  • Dynamic themes. Being able to change the style of the autocomple and dropdown list could be a really nice feature to have.
  • Different effects to show/hide the dropdown list (SlideDown|SlideUp) <- This one is easy with JQuery, any volunteers?

How it works

a) Configure the HEAD section of your HTML page:

<br />
<!-- insert the styles of the autocomplete box --></p>
<link rel="stylesheet" href="css/autocomplete.css" type="text/css" media="screen" charset="utf-8" />
<!-- javascript libraries required -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/autocomplete.jquery.js"></script>

b) Create the objects on DOM Load (you can also create them dynamically too):

var json_options = {
callback: function (obj) { $('#json_info').html('you have selected: ' + ' ' + obj.value + ' (' + + ')'); }
var xml_options = {
script:'test.php?limit=6&', // for the sake of the server test, json var not set
json:false, // <----------- IMPORTANT
callback: function (obj) { $('#xml_info').html('you have selected: ' + ' ' + obj.value + ' (' + + ')'); }
$('#test_json').autoComplete(json_options); // json test
$('#test_xml').autoComplete(xml_options); // xml test

As you can see on the code, the ‘script’ property of the object is where we write the server page to call via AJAX in order to get the dropdown results. Let’s view the important lines within this test.php page:

// here we collect the POSTED variable
// what to search?
$input = strtolower( $_GET['input'] );
$len = strlen($input);
// how many results we display?
$limit = isset($_GET['limit']) ? (int) $_GET['limit'] : 0;

Now, the way you find matches from such POSTED variable is up to you, it could be checked against an array (as in the examples included) or against a database by using the LIKE SQL statement.


Expose your ideas on the comments and I will list them in this small section. It seems that this dropdown keeps rocking, so why not make it better. Here goes mine:

  1. Paging Results

*note from Miroslav -thanks*

When I use only jQuery plugin autocomplete, it doesn’t work. I have to change the position of div with suggestions by using jQuery .css(“left”,pos.left) and .css(“top”, + something), otherwise it fails on div.left() and functions, which aren’t defined.


This is happening because of the problem that some browsers have with CSS properties not specified as it happens with ‘display:’ style attributes. It is not a bug from the code but from the ‘our beloved browsers’. Thank you very much Miroslav for telling us about this bug.


14-05-2010  Animations are now using easing functions, linear or swing are available when using jQuery only, more are available from – Martin Gotik

14-05-2010 Resizing of the list (when more or less items are displayed when typing text) is now animated too, I had to remove and add some elements for it to look smooth in all browsers – Martin Gotik

14-05-2010 The list isn’t hidden anymore when doing an AJAX call when the list is visible, looks more smooth IMHO – Martin Gotik

14-05-2010 Alert in AJAX request is disabled as mentioned by Carpes on the blog – Martin Gotik

05-03-2010 Animations are more dynamic now and available for both the hide and show event – Martin Gotink.

05-03-2010 Updated the browsing through the list with the keyboard. Thanks Martin Gotink.

05-03-2010 MaxResults and MaxHeight implemented. Thanks Martin Gotink.

05-03-2010 Tested all changes with jQuery 1.4.1 and 1.4.2 on IE 6/7/8, Opera 10.10/10.50, FF 3.5 and Chrome 4.0. IE took a bit more effort (especially the maxHeight option), but the result is (almost) the same on all browsers, only IE6/7 has some small issues with the scrollbar when maxHeight is set (some strange effects when using the mouse to drag the scrollbar). Thanks Martin Gotink.

05-03-2010 Tagged all my changes with MG in the .js and .css files in the attached .zip file, so you can see what i’ve changed, and why. Thanks Martin Gotink.

21-01-2010 Fixed style positioning. Thanks Konstantin.

IMPORTANT! All changes made by others will maintain their credits from now on. Apologies for those I didn’t include as I couldn’t update this blog as much as I want due to lack of time -Far too many projects under development.


For some reason, some of you guys cannot download (I have downloads manager plugin for wordpress and it seems that is not working properly with this resource). For those having problems to download, please download the plugin here mirror download

IMPORTANT! Demo is within the download Link -thanks Lev for pointing me this misscommunication thing.

I have updated the link so now all of you shouldnt have problems to download. Sorry for the inconvenience. download: Ajax Powered AutoComplete for JQuery (B)
added: 17/01/2010
clicks: 8784


116 thoughts on “Autocomplete for JQuery.js

  1. That is a very general error, very difficult for me to help you out, try this:

    /* ajax options omitted */
    error: function (xmlHttpRequest, textStatus, errorThrown) {
    if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
    return; // it's not really an error
    // Do normal error handling

  2. Hey! This is a nice script and almost the thing I was looking for. I downloaded “Autocomplete Plugin for JQuery 1.3.2” and played around with it. Can I somehow configure that I only want to search one entry and not more, so no separation would be needed. I’d also like to disable the autocompletion after an entry has been found and checked (clicked or chosen by the arrow keys and confirmed with return key). So I can add additional infos without trying to get another lookup. What I want to do: provide a list of street names for and add a house number. I appreciate your help!

    Thanks and cheers

  3. hi,

    unlike Herry, do i think its neat to have a autoSuggest that shows
    several combinations not necessarily Starting with the correct phrase.

    Meaning: a search on a variable: AM should show a dropdown like
    Amsterdam, but also flAMe and Prince WilliAM etc…

    also, at the same time i don’t want no “no results” message returned at any time.

    how to achieve this?

  4. ps. the “no results” is in the autocomplete.jquery.js so skip that.

    as for the search returns i am using the xml version
    and the database does return records all holding the “AM” variable
    anywhere in the field.

    I am using LIKE ‘%$var%’ in the query so it should be in the script i presume…

  5. Hi Mathias, you can stop the multiple search on its options and after lookup you will have to hack its internal code (maybe including a new option?) to stop more autocompletes

  6. The only thing you need is to modify your search script on the server side. Remember that will be depending on the way your database collation is set (at least with mySQL) search is case sensitive…


  7. like i said, the query i’m using is: LIKE ‘%$var%’

    meaning it does take out all records holding AM: such as:

    AMsterdam, flAMe, WilliAM

    but the script doesn’t it only selects the records Starting with AM

    (about the case sensitive; i’m only using capitals for illustration reasons)

    that leaves me with the question; why only does the script selects the records starting with the exact search input??

  8. Hi Antonio,

    I hope this is still active. Anyway, your script rocks man!

    Just one question, is there a way that I could trigger to show all results on focus or on a click of a text link (that is without keying anything).



  9. Yes Rob!

    You will have to code the javascript events for the on-focus or on-click events of the elements, and then trigger the event that displays the dropdown directly with jquery.

  10. I’ve got it working — thank you so much for sharing.

    The only problem is that when you have more than 1 autocomplete field on a page, it seems only the last one works.

    Can you help?

  11. Hi man :)
    I am new with all these java/ajax codes.
    I can’t find out how i can do so when i click a search result it will go to another page.

    Can you help med with that? :-)


    Justin :)

  12. When i have a long list, it gives me no results every other letter. i have cache:false, Is there something i’m missing?


Leave a Reply

Your email address will not be published. Required fields are marked *