Updated 2011-02-23 to allow for destroying the widget correctly and the new Google Custom Search API
I made a jQuery UI
widget (a subclass
of textpopup) that hijaxes a Google search form to show the results in a popup box rather than on a new page. Google AJAX search returns only the top four results, so the popup box includes a link to the full search page.
Download the textpopup code and the widget subclassing code.
$.ui.googleSearch
So if you have a simple Google search for your site:
<form method="get" action="http://www.google.com/cse" >
<input name="q" type="text"/>
<input type="submit" value="Search with Google"/>
<input name="as_sitesearch" value="http://bililite.nfshost.com/blog" type="hidden"/>
</form>Note that the google.com/search query is deprecated; you should use Google Custom Search. But to make the widget work, you need to include the <input name="sitesearch" value="http://bililite.nfshost.com/blog" type="hidden"/> or <input name="as_sitesearch" value="http://bililite.nfshost.com/blog" type="hidden"/> element, since that is what the widget uses to find the website name.
You can use the Google AJAX Search API to make it AJAX-y:
<!-- Make sure to include the Google code and use your own Google API key here -->
<script src="http://www.google.com/jsapi?key=ABQIAAAA-9ImZ-drhltmN0pO3seqMBRffDClpIMT8zovbMirRiSUKbarGBR2yyqzhOxfMfoD2YyJmOkXgk65qw"></script>
<form method="get" action="http://www.google.com/search" >
<input name="q" type="text" id="searchexample" />
<input type="submit" value="Search with Google"/>
<input type="button" value="Remove the Widget" id="removewidget" />
<input name="as_sitesearch" value="http://bililite.nfshost.com/blog" type="hidden"/>
</form>
<!-- and make sure to style the result (otherwise it's transparent and impossible to read)-->
<style>
.searchresults {
background: white;
padding: 5px;
border: 2px outset black;
width: 500px;
}
</style>
// load the search code
google.load("search","1");
// create the search widget
$('#searchexample').googleSearch();
// allow removing the widget (has to remove the submit handler from the enclosing form)
$('#removewidget').click(function(){
$('#searchexample').googleSearch('destroy');
});
It has one option of its own, contents, which is shown in the results while the search is running. It can be anything accepted by $.fn.html. The default is $([]).
It can use all the options from textpopup (it defaults the trigger option to null since you only want to see the search results when the form is submitted), plus the url option from ajaxpopup below; the default is '/inc/search.html' which in this demo contains the following:
<div class="searchresults">
<h3>Search Results</h3>
<div class="resultsdiv"></div>
<a class="moreresults">More Results »</a>
</div>
The file pointed to by url must have a <div class="resultsdiv"> for the results to be put and a <a class="moreresults"> for the
link to the full Google search.
It looks like there's a way to use the Google Custom Search code directly as a popup; I'll have to look into that.
$.ui.ajaxpopup
Both the googleSearch above and the hebrewKeyboard widget use the same strategy for building the popup box: instead of creating a string on the fly (like
$('<div class="searchresults">
<h3>Search Results</h3>
<div class="resultsdiv">
</div>
<a class="moreresults">More Results »</a>
</div>').appendTo(box);I abstracted that into its own widget, ajaxpopup that has two options:
url- The URL of the HTML to be loaded into the popup box. The default value is undefined.
busy- The "busy" icon: the element or HTML to be displayed while the real url is being loaded. Default:
'<img src="http://bililite.com/images/busy/wait22.gif" />'. (Yes, I'm allowing hotlinking. For now).
The retrieved HTML is cached, so the AJAX is only called once. Any <style> elements are pulled out and appended to the <head> and the remainder is put in the popup box.
It includes a hack to use data: URL's, even in Internet Explorer, so you can include the HTML inline.
For example, if the file /blog/blogfiles/ajaxpopupexample.html is:
Then you can do:
<input id="ajaxpopup-demo-1"/>$('#ajaxpopup-demo-1').ajaxpopup({url: "/blog/blogfiles/ajaxpopupexample.html"});And you can do:
<input id="ajaxpopup-demo-2"/>$('#ajaxpopup-demo-2').ajaxpopup({url: 'data:,<span style="background:white">Hello, world</span>'});And to demonstrate the busy icon:
<input id="ajaxpopup-demo-3"/>$('#ajaxpopup-demo-3').ajaxpopup({url: 'http://example.com/nosuchurl'});
Leave a Reply