jQuery Autocomplete with Multiple Search Engines

Combine multiple search suggestions into single search field.

Search:

Overview:

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.

Requirements:

This API uses jQuery and jQueryUI so you need to include that in the HEAD section:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

For combining search suggestions from multiple search engines, I have used a PHP script which can be downloaded here.

For displaying autocomplete suggestions in different categories, we have to extend the jQuery Autocomplete widget as described in the Autocomplete widget documentation http://jqueryui.com/demos/autocomplete/#categories.

For styling the search engine cateogy in the dropdown, you can use and modify the CSS code shown below:

Configuration Options

The PHP script contains a list of most popular search engine suggestions. You can include more or remove some according to you needs. For including a new search suggestion category, you will have to add one more element to the $searchEngines array in the PHP script.
Example format:

"EngineName" => array("search suggestion url", "search url")

How to get more search suggestion URL's?
This is bit of a hack that you will have to figure out on your own as most of the search engines do not publish public search suggestion API's. I found out an easy way to figure out the suggestion URL using Firefox's search plugins. Go to Firefox's search plugin website (https://addons.mozilla.org/en-US/firefox/search-tools/) and install the desired serach plugin. Then go to your local file system and navigate to the Firefox installation directory (Windows: C:\Program Files\Mozilla Firefox\searchplugins). You will see all the search engine configuration of XML files in that folder. You can open each of the files and get the search query suggestion url.
Note: Not all search plugins support autocomplete feature.
Search suggestion engine URL's alredy in the script:
Google = http://suggestqueries.google.com/complete/search?output=firefox&client=firefox&q=jquery
Bing = http://api.bing.com/osjson.aspx?query=jquery
Yahoo = http://ff.search.yahoo.com/gossip?output=fxjson&command=jquery
Wikipedia = http://en.wikipedia.org/w/api.php?action=opensearch&search=jquery
Amazon = http://completion.amazon.com/search/complete?search-alias=aps&client=amazon-search-ui&mkt=1&q=canon
Ebay = http://anywhere.ebay.com/services/suggest/?q=canon

Note: Using multiple search engines can slow down the suggestion process so you can remove the search engines from the Array in PHP script if it takes longer to fetch all the suggestions.

Demo Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Autocomplete with Multiple Search Engines Suggestions</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$.widget( "custom.catcomplete", $.ui.autocomplete, {
	_renderMenu: function( ul, items ) {
		var self = this, currentCategory = "";
		$.each( items, function( index, item ) {
			if ( item.category != currentCategory ) {
				ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
				currentCategory = item.category;
			}
			self._renderItem( ul, item );
		});
	}
});

$(function(){ //page load
	$("#q").focus(); //set focus to search field
	$("#q").catcomplete({
		source:"suggest.php",
		minLength:2,
		delay:10,
		select: function(event, ui) { 
			window.location.assign(ui.item.searchUrl + ui.item.label);
		}
	});
});
</script>
<style type="text/css">
.ui-autocomplete-category {
	font-weight: bold;
	font-size: 1em;
	padding: .2em .2em;
	margin: .4em 0 .2em;
	line-height: 1.5;
	color: #069;
	border-bottom: 2px solid #069;
}
</style>
</head>
<body>
	<form id="form1" name="form1" method="get" action="http://www.google.com/search">
		Search: 
		<input name="q" id="q" type="text" size="40" />
		<input name="submit" type="submit" value="Search" />
	</form>
</body>
</html>

Download

Download the PHP script for combining multiple search suggestions.

My Website | My Blog