Tuesday, May 26, 2009

Search multiple search engines from a single search field like Katapulco.com on your website using JavaScript and DHTML

Here is an easy to use JavaScript function to embed a Katapulco.com like search engine on your website. Katapulco does a nice job at integrating almost all the popular search engines using a single search field. I have used a similar approach and designed this JavaScript function which you can place on your websites and get similar search functionalities.

To search on a specific website the user needs to append the appropriate search prefix before the search string. For example if you are looking for JavaScript eBooks on Google Books, you need to search for “gb javascript”, where gb is the search prefix for Google Books and following string is the search string. Here is a screenshot of the search page with the list of search prefixes implemented:

image

I have tried to include a lot of popular websites to search from, to add your own search prefix to the list follow the instructions given after the code. Here is the complete HTML file 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>My Search Engine</title>

<script type="text/javascript">
// Developed by: Abhinay Rathore [http://web3o.blogspot.com/]
function mysearch() {
var search_string = document.getElementById("s").value.toLowerCase();
//Default Google Search string
var url = "http://www.google.com/search?q=" + search_string;
//Page redirect URL based upon the search prefix
if (search_string.indexOf("g ") == 0) //Google Web search
{ url = "http://www.google.com/search?q=" + search_string.substring(2); }
if (search_string.indexOf("gi ") == 0) //Google Image search
{ url = "http://images.google.com/images?q=" + search_string.substring(3); }
if (search_string.indexOf("gv ") == 0) //Google Video search
{ url = "http://video.google.com/videosearch?q=" + search_string.substring(3); }
if (search_string.indexOf("gm ") == 0) //Google Maps search
{ url = "http://maps.google.com/?q=" + search_string.substring(3); }
if (search_string.indexOf("gn ") == 0) //Google News search
{ url = "http://news.google.com/news?q=" + search_string.substring(3); }
if (search_string.indexOf("gp ") == 0) //Google Product search
{ url = "http://www.google.com/products?q=" + search_string.substring(3); }
if (search_string.indexOf("gb ") == 0) //Google Books search
{ url = "http://books.google.com/books?q=" + search_string.substring(3); }
if (search_string.indexOf("yt ") == 0) //YouTube search
{ url = "http://www.youtube.com/results?search_query=" + search_string.substring(3); }
if (search_string.indexOf("d ") == 0) //Dictionary search
{ url = "http://dictionary.reference.com/search?q=" + search_string.substring(2); }
if (search_string.indexOf("i ") == 0) //IMDb search
{ url = "http://www.imdb.com/find?s=all&q=" + search_string.substring(2); }
if (search_string.indexOf("w ") == 0) //Wikipedia search
{ url = "http://en.wikipedia.org/wiki/Special:Search?search=" + search_string.substring(2); }
if (search_string.indexOf("wd ") == 0) //Wiktionary search
{ url = "http://en.wiktionary.org/wiki/Special:Search?search=" + search_string.substring(3); }
if (search_string.indexOf("wb ") == 0) //WikiBooks search
{ url = "http://en.wikibooks.org/wiki/Special:Search?search=" + search_string.substring(3); }
if (search_string.indexOf("wn ") == 0) //WikiNews search
{ url = "http://en.wikinews.org/wiki/Special:Search?search=" + search_string.substring(3); }
if (search_string.indexOf("y ") == 0) //Yahoo Web search
{ url = "http://search.yahoo.com/search?q=" + search_string.substring(2); }
if (search_string.indexOf("ym ") == 0) //Yahoo Maps search
{ url = "http://maps.yahoo.com/?ard=1&q1" + search_string.substring(3); }
if (search_string.indexOf("l ") == 0) //Microsoft Live Web search
{ url = "http://search.live.com/results.aspx?q=" + search_string.substring(2); }
if (search_string.indexOf("lm ") == 0) //Microsoft Live Maps search
{ url = "http://maps.live.com/?q=" + search_string.substring(3); }
if (search_string.indexOf("f ") == 0) //Flickr search
{ url = "http://www.flickr.com/search/?q=" + search_string.substring(2); }
if (search_string.indexOf("a ") == 0) //Answers.com search
{ url = "http://www.answers.com/" + search_string.substring(2); }
if (search_string.indexOf("t ") == 0) //Thesaurus.com search
{ url = "http://thesaurus.reference.com/browse/" + search_string.substring(2); }
if (search_string.indexOf("mc ") == 0) //MetaCafe search
{ url = "http://www.metacafe.com/tags/" + search_string.substring(3); }
if (search_string.indexOf("to ") == 0) //Torrent search
{ url = "http://www.usniff.com/q/" + search_string.substring(3); }
// Redirect Page to the search url...
window.location = url;
}
</script>
</head>

<body>
<h3>
Search: <input type="text" name="s" id="s" onkeydown="if(event.keyCode==13) mysearch();"/>
<input name="search" type="button" id="search" value="Go" onclick="mysearch()" />
</h3>
<strong>Examples:</strong> &quot;g Obama&quot; <em>or</em> &quot;gm Chicago&quot; <em>or</em> &quot;yt family guy&quot;<br /><br />
<strong>g</strong> = Google Web search<br />
<strong>gi</strong> = Google Image search<br />
<strong>gv</strong> = Google Video search<br />
<strong>gm</strong> = Google Maps search<br />
<strong>gn</strong> = Google News search<br />
<strong>gp</strong> = Google Product search<br />
<strong>gb</strong> = Google Books search<br />
<strong>yt</strong> = YouTube search<br />
<strong>d</strong> = Dictionary search<br />
<strong>w</strong> = Wikipedia search<br />
<strong>wd</strong> = Wiktionary search<br />
<strong>wb</strong> = WikiBooks search<br />
<strong>wn</strong> = WikiNews search<br />
<strong>y</strong> = Yahoo Web search<br />
<strong>ym</strong> = Yahoo Map search<br />
<strong>l</strong> = Live Web search<br />
<strong>lm</strong> = Live Map search<br />
<strong>f</strong> = Flickr search<br />
<strong>a</strong> = Answers.com search<br />
<strong>t</strong> = Thesaurus.com search<br />
<strong>mc</strong> = MetaCafe search<br />
<strong>to</strong> = Torrent search<br />
</body>
</html>

To add a new search prefix you need to add another if statement to the JavaScript mysearch() function as follows:

if (search_string.indexOf("xx ") == 0)
{ url = "complete_website_search_url" + search_string.substring(3); }

Where xx is the search prefix and complete website URL is added to the url string concatenated with the search string substring after eliminating the search prefix from it. Substring start index should be 1 more then the length of the prefix.

Technorati Tags: ,,

1 comment:

Thanks a lot for your valuable comments :)