Auto-suggest jQuery plugin

What is auto complete and auto suggest?

Auto complete and auto suggest are a user interface feature that extend search functionality. It basically makes it easier and fast for the user to search structured data.

There is sometimes a mixups between Auto complete and Auto suggest. I will try to state what comes to my mind when talking about both. I also share a fix/midification I have done for a cool auto suggest jQuery plugin.

Auto complete

Auto complete will consider the user input as a prefix to the query so if I type “spo”, it will return “sport” or “spook” but not “kaspomat”. In SQL term this is an equivalent to saying:

WHERE some_column_name LIKE query%

Auto suggest

Auto suggest will consider the user input as a prefix, suffix and at any other location in the query, so if I type “spo”, it will return “sport”, “spook”, “kaspomat” and also “saspo”. In SQL term this is an equivalent to saying:

WHERE some_column_name LIKE %query%


I found a cool auto suggest project written by Drew Wilson, it was good looking and works quite well.
It had however some issues I had to resolve:

  1. Very little cross browser support (IE is still alive and kicking) +
  2. It provides a multi select functionality which enables users to select multiple items from the auto suggest box. I needed it to work with the native text box.
  3. The CSS needed to be tuned to work with a small and thin search box

I tried to contact drew and to merge my changes with his, but could not get a hold of him.

Lucky for us Drew released his code under the MIT open source license (good on you!). This enabled me, not only to modify his code but also, to share my modifications with you.

Auto–suggest provides a simple, elegant and cross-browser tested auto suggest functionally.

DEMO

I have implemented this code on one of our new initiative – an automagic product comparison engine, in which we really needed a good auto suggest searchbox. Check it out – really hard to miss the search there.

Download

Source code can be found in the plugin page.

Note to Drew Wilson- if you like to merge back to your code, be my guest! Also, could not access your site using Firefox 2 or IE 8, only chrome worked for me.

Share the love...Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

Amir Shevat

Amir Shevat is the global Startup Outreach lead in Google Developer Relations (g.co/launch). Previously, Amir Led Google Campus Tel Aviv and was the co founder of several startups.

You may also like...

3 Responses

  1. jorj says:

    WordPress autosuggest plugin, based on jQuery Autosuggest can be found here:
    http://wpplugins.com/plugin/142/wordpress-autosuggest

  2. Amir Shevat says:

    @jorj, yours is not free :)

  3. Eli says:

    hmmm, i have used Drews solution in the past and had a hard time to get teh CSS to work for thinner boxes.

    What changes did you make in the JS?

    I was wondering if you had this running using the ajax parameters rather than the hard coded JS.

    I can’t get the results to post or append into the UL

Leave a Reply

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