Saturday, October 1, 2011

jQuery Autocomplete with Multiple Search Engines

Search suggestions are one of the most important features people like to include on their sites as it minimizes the chances of typo errors and facilitate easy search my providing relevant suggestions in real time. I use a similar search suggestion tool on my personal dashboard page which works exactly like the Google suggest page. I thought of expanding it to include suggestions from multiple search engines so if I want to search some product on Amazon or some knowledge article on Wikipedia, it would get suggestions from all the engines at once. Here you can find an easy way to incorporate multiple search suggestions on your pages using jQuery and a small PHP script which combines the search suggestions.

Demo and Download: http://lab.abhinayrathore.com/autocomplete/

Search suggestion engines it can support out of the box are: Google, Bing, Yahoo, Wikipedia, Amazon and Ebay.

For adding more suggestion engines, you can read the Configuration Options section on the page above. You can download the PHP script to combine multiple search suggestions from the link above.

3 comments:

  1. This is an awesome post! I came across your code when I was looking for a way to get search suggestions from multiple sources, and think you have done a great job with this code.

    A quick follow up question: is there a way to access various attributes of the object that the jsonp request may return (for instance trackName, or trackID search that a search on iTunes (http://ax.phobos.apple.com.edgesuite.net/WebObjects/MZStoreServices.woa/wa/wsSearch)would return)?

    ReplyDelete
  2. Just an FYI the code is not compatible with jquery 1.9.0 and jquery ui 1.9.

    If you drop down to the 1.8 branch everything works fine.

    ReplyDelete
  3. I came across your post and the script looks FANTASTIC! However, I am having trouble getting this to work. The field autopopulates and looks like it is working, but when you click on any suggestion, nothing happens. Please help me fix this. This issue even occurs on your demo page.

    ReplyDelete

Thanks a lot for your valuable comments :)