Autocomplete the Search Box

Was reading the jqueryui site the other day and came across an interesting tidbit; autocomplete feature is built in. That got me to thinking, why not autocomplete the search box with the products name;

That’s the finished article, and as you can see selects the products name (in the correct language) based on the input of the box.

With some thinking, I was able to write a tiny background script to grab the results of a MySQL search based on the keyword in the input box. It took me a half hour to realise that the autocomplete feature sends $_GET[‘term’] – so watch out for that!

I then added a class to the search input box, and joined the jquery trickery to it;

And here is a video of it in action;

I was going to add it to the add-on’s area of osCommerce, but when I got there I found almost the same thing already made, so I did not bother (as you can plainly see in the image/video that it is made on a clients site meaning I would have to re-do it for a basic 2.3.1). Might as well just use the existing one, unless anyone really really wants my version

4 Replies to “Autocomplete the Search Box”

  1. Hi

    Thanks for the article. I installed the autocomplete search, my background color is balck and the search result also have black background, I like to change it to white search result background, how can I do it? Many thanks in advance.

  2. In the .css. I’m guessing there is a support thread for the addon, so that would be the first place to ask…

  3. Hi Gary

    I can’t believe I had missed this article…

    ***unless anyone really really wants my version***
    I for one would love to have your version, if it’s possible 🙂

Leave a Reply

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