{"id":426,"date":"2009-03-25T14:54:58","date_gmt":"2009-03-25T20:54:58","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=426"},"modified":"2011-11-07T14:33:42","modified_gmt":"2011-11-07T20:33:42","slug":"new-widgets-googlesearch-and-ajaxpopup","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2009\/03\/25\/new-widgets-googlesearch-and-ajaxpopup\/","title":{"rendered":"New Widgets: <code>googleSearch<\/code> and <code>ajaxpopup<\/code>"},"content":{"rendered":"<p><strong>Updated 2011-02-23 to allow for destroying the widget correctly and the new Google Custom Search API<\/strong><\/p>\r\n<p>I made a <a href=\"http:\/\/ui.jquery.com\/\">jQuery UI<\/a>\r\n widget (a <a href=\"\/blog\/extending-jquery-ui-widgets\/\">subclass<\/a>\r\n of <a href=\"\/blog\/2009\/01\/02\/new-ui-widgets-textpopup-and-hebrewkeyboard\/\"><code>textpopup<\/code><\/a>) that hijaxes a Google search form to show the results in a popup box rather than on a new page. <a href=\"http:\/\/bililite.nfshost.com\/blog\/2009\/01\/02\/new-ui-widgets-textpopup-and-hebrewkeyboard\/\">Google AJAX search<\/a> returns only the top four results, so the popup box includes a link to the full search page.<\/p>\r\n<p><a href=\"\/inc\/jquery.googlesearch.js\">Download the code<\/a>.<\/p>\r\n<p>Download the <a href=\"\/inc\/jquery.textpopup.js\"><code>textpopup<\/code> code<\/a> and the <a href=\"\/inc\/jquery.ui.subclass.js\">widget subclassing code<\/a>.<\/p>\r\n<!--more-->\r\n<h4><code>$.ui.googleSearch<\/code><\/h4>\r\n<script src=\"\/inc\/jquery.ui.subclass.js\"><\/script>\r\n<script src=\"\/inc\/jquery.textpopup.js\"><\/script>\r\n<script src=\"\/inc\/jquery.googlesearch.js\"><\/script>\r\n<p>So if you have a simple <a href=\"http:\/\/www.google.com\/cse\/docs\/resultsxml.html\">Google search<\/a> for your site:<\/p>\r\n<pre><code class=\"language-html demo\">\r\n&lt;form method=\"get\" action=\"http:\/\/www.google.com\/cse\" &gt;\r\n\t&lt;input name=\"q\" type=\"text\"\/&gt;\r\n\t&lt;input type=\"submit\" value=\"Search with Google\"\/&gt;\r\n\t&lt;input name=\"as_sitesearch\" value=\"http:\/\/bililite.nfshost.com\/blog\" type=\"hidden\"\/&gt;\r\n&lt;\/form&gt;<\/code><\/pre>\r\n<p>Note that the <code>google.com\/search<\/code> query is <a href=\"http:\/\/googlecode.blogspot.com\/2010\/11\/introducing-google-apis-console-and-our.html\">deprecated<\/a>; you <a href=\"\/blog\/2011\/02\/23\/a-google-bug\/\">should use Google Custom Search<\/a>. But to make the widget work, you need to include the <code class=\"language-html\">&lt;input name=\"sitesearch\" value=\"http:\/\/bililite.nfshost.com\/blog\" type=\"hidden\"\/&gt;<\/code> or <code class=\"language-html\">&lt;input name=\"as_sitesearch\" value=\"http:\/\/bililite.nfshost.com\/blog\" type=\"hidden\"\/&gt;<\/code> element, since that is what the widget uses to find the website name.<\/p>\r\n<p>You can use the <a href=\"http:\/\/code.google.com\/apis\/ajaxsearch\/\">Google AJAX Search API<\/a> to make it AJAX-y:<\/p>\r\n<pre><code class=\"language-html\">\r\n&lt;!-- Make sure to include the Google code and use your own Google API key here --&gt;\r\n&lt;script src=&quot;http:\/\/www.google.com\/jsapi?key=ABQIAAAA-9ImZ-drhltmN0pO3seqMBRffDClpIMT8zovbMirRiSUKbarGBR2yyqzhOxfMfoD2YyJmOkXgk65qw&quot;&gt;&lt;\/script&gt;\r\n<\/code><\/pre>\r\n<pre><code class=\"language-html demo\">\r\n&lt;form method=\"get\" action=\"http:\/\/www.google.com\/search\" &gt;\r\n\t&lt;input name=\"q\" type=\"text\" id=\"searchexample\" \/&gt;\r\n\t&lt;input type=\"submit\" value=\"Search with Google\"\/&gt;\r\n\t&lt;input type=\"button\" value=\"Remove the Widget\" id=\"removewidget\" \/&gt;\r\n\t&lt;input name=\"as_sitesearch\" value=\"http:\/\/bililite.nfshost.com\/blog\" type=\"hidden\"\/&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;!-- and make sure to style the result (otherwise it's transparent and impossible to read)--&gt;\r\n&lt;style&gt;\r\n.searchresults {\r\n  background: white;\r\n  padding: 5px;\r\n  border: 2px outset black;\r\n  width: 500px;\r\n}\r\n&lt;\/style&gt;\r\n<\/code><\/pre>\r\n<script>google.load(\"search\",\"1\")<\/script>\r\n<pre><code class=\"language-javascript\">\r\n\/\/ load the search code\r\ngoogle.load(\"search\",\"1\");\r\n<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">\r\n\/\/ create the search widget\r\n$('#searchexample').googleSearch();\r\n\/\/ allow removing the widget (has to remove the submit handler from the enclosing form)\r\n$('#removewidget').click(function(){\r\n  $('#searchexample').googleSearch('destroy');\r\n});\r\n<\/code><\/pre>\r\n<p>It has one option of its own, <code>contents<\/code>, which is shown in the results while the search is running. It can be anything accepted by <a href=\"http:\/\/docs.jquery.com\/Attributes\/html#val\"><code>$.fn.html<\/code><\/a>. The default is <code>$([])<\/code>.<\/p>\r\n<p>It can use all the options from <a href=\"\/inc\/jquery.textpopup.js\"><code>textpopup<\/code><\/a> (it defaults the <code>trigger<\/code> option to <code>null<\/code> since you only want to see the search results when the form is submitted), plus the <code>url<\/code> option from <code>ajaxpopup<\/code> below; the default is <code>'\/inc\/search.html'<\/code> which in this demo contains the following:<\/p>\r\n<pre><code class=\"language-html\">\r\n&lt;div class=&quot;searchresults&quot;&gt;\r\n\t&lt;h3&gt;Search Results&lt;\/h3&gt;\r\n\t&lt;div class=&quot;resultsdiv&quot;&gt;&lt;\/div&gt;\r\n\t&lt;a class=&quot;moreresults&quot;&gt;More Results &amp;raquo;&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\r\n<p>The file pointed to by <code>url<\/code> must have a <code class=\"language-javascript\">&lt;div class=&quot;resultsdiv&quot;&gt;<\/code> for the results to be put and a <code class=\"language-javascript\">&lt;a class=&quot;moreresults&quot;&gt;<\/code> for the\r\nlink to the full Google search.<\/p>\r\n<p>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.<\/p>\r\n<h4><code>$.ui.ajaxpopup<\/code><\/h4>\r\n<p>Both the <code>googleSearch<\/code> above and the <a href=\"\/blog\/2009\/01\/02\/new-ui-widgets-textpopup-and-hebrewkeyboard\/\"><code>hebrewKeyboard<\/code> widget<\/a> use the same strategy for building the popup box: instead of creating a string on the fly (like <pre><code class=\"language-javascript\">$('&lt;div class=&quot;searchresults&quot;&gt;\r\n  &lt;h3&gt;Search Results&lt;\/h3&gt;\r\n  &lt;div class=&quot;resultsdiv&quot;&gt;\r\n  &lt;\/div&gt;\r\n  &lt;a class=&quot;moreresults&quot;&gt;More Results &amp;raquo;&lt;\/a&gt;\r\n&lt;\/div&gt;').appendTo(box);<\/code><\/pre>), they pull the skeleton of the HTML from an external URL via AJAX and modify that as needed. I think it's much easier to debug and customize.<\/p>\r\n<p>I abstracted that into its own widget, <code>ajaxpopup<\/code> that has two options:<\/p>\r\n\r\n<div class=\"prelike\">\r\n<dl>\r\n<dt><code>url<\/code><\/dt><dd>The URL of the HTML to be loaded into the popup box. The default value is undefined.<\/dd>\r\n<dt><code>busy<\/code><\/dt><dd>The \"busy\" icon: the element or HTML to be displayed while the real url is being loaded. Default: <code class=\"language-javascript\">'&lt;img src=\"http:\/\/bililite.com\/images\/busy\/wait22.gif\" \/&gt;'<\/code>. (Yes, I'm allowing hotlinking. For now).<\/dd>\r\n<\/dl>\r\n<\/div>\r\n<p>The retrieved HTML is cached, so the AJAX is only called once. Any <code class=\"language-html\">&lt;style&gt;<\/code> elements are pulled out and appended to the <code class=\"language-html\">&lt;head&gt;<\/code> and the remainder is put in the popup box.<\/p>\r\n<p>It includes a hack to use <a href=\"http:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme\"><code>data:<\/code> URL's<\/a>, even in Internet Explorer, so you can include the HTML inline.<\/p>\r\n<p>For example, if the file <a href=\"\/blog\/blogfiles\/ajaxpopupexample.html\">\/blog\/blogfiles\/ajaxpopupexample.html<\/a> is:<\/p>\r\n<iframe src=\"\/blog\/blogfiles\/ajaxpopupexample.html\" style=\"border: 1px solid black\"><\/iframe>\r\n<p>Then you can do:<\/p>\r\n<pre><code class=\"language-html demo\">&lt;input id=\"ajaxpopup-demo-1\"\/&gt;<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">$('#ajaxpopup-demo-1').ajaxpopup({url: \"\/blog\/blogfiles\/ajaxpopupexample.html\"});<\/code><\/pre>\r\n<p>And you can do:<\/p>\r\n<pre><code class=\"language-html demo\">&lt;input id=\"ajaxpopup-demo-2\"\/&gt;<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">$('#ajaxpopup-demo-2').ajaxpopup({url: 'data:,&lt;span style=&quot;background:white&quot;&gt;Hello, world&lt;\/span&gt;'});<\/code><\/pre>\r\n<p>And to demonstrate the busy icon:<\/p>\r\n<pre><code class=\"language-html demo\">&lt;input id=\"ajaxpopup-demo-3\"\/&gt;<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">$('#ajaxpopup-demo-3').ajaxpopup({url: 'http:\/\/example.com\/nosuchurl'});<\/code><\/pre>\r\n","protected":false},"excerpt":{"rendered":"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, [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/426"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=426"}],"version-history":[{"count":50,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/426\/revisions"}],"predecessor-version":[{"id":1569,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/426\/revisions\/1569"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}