Funky world of Juha

Bizarre and funky world of Juha

Google AJAX Search with jQuery August 3, 2010

Filed under: Google,jQuery — juhq @ 8:12 am

This is just a simple and quick(!) jQuery implementation of http://davidwalsh.name/google-ajax-search

It’s not perfect, but seems to work.

<!-- SEARCH FORM -->
<form action="http://www.google.com/search" method="get">
<!-- HTML5 SEARCH BOX!  -->
<input type="search" id="search-box" name="q" results="5" autocomplete="on" />
<!-- SEARCH BUTTON -->
<input id="search-submit" type="submit" value="Search" />
<div id="search-area" style="position:relative;">
<div id="search-results">
<div id="search-results-pointer"></div>
<div id="search-results-content"></div>
</div>
</div>

</form>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY_GOES_HERE"></script>
<script type="text/javascript">
google.load("search","1");
google.load("jquery", 1.4.2);

function googlesearch() {
	if(typeof(searchLoaded) == "undefined") {
		var searchLoaded = true; // set searchLoaded to "true"; no more loading!

		var searchBox = $("input#search-box");

		// google interaction
		var search = new google.search.WebSearch(),
		control = new google.search.SearchControl(),
		options = new google.search.DrawOptions();

		// set google options
		options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
		options.setInput(searchBox);

		// set search options
		search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

		// set search controls
		control.addSearcher(search);
		control.draw(document.getElementById("search-results-content"),options);
		control.setNoResultsString("No results were found.");

		// add listeners to search box
		searchBox.bind("keydown", function() {
			var value = searchBox.val();
			if(value) {
				control.execute(value);
			}
		});
	}
}
google.setOnLoadCallback(googlesearch);
</script>
Advertisements
 

3 Responses to “Google AJAX Search with jQuery”

  1. Vladica Savic Says:

    How to limit this search only to my website?
    I try with setSiteRestriction but it seems that this options is useless?

  2. John Says:

    I too would like to know how to limit the search to a specified website for local searches only. The original article at http://davidwalsh.name/dw-content/google-ajax-search.php does this but even using the hidden form code, the ajax returns global results.
    Is there something in the jquery that needs tweaking to allow a site -only search?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s