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.
<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:
"EngineName" => array("search suggestion url", "search url")
<!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>