How to use Google custom search with lazy loading approach

If you have Google adsense account then you can use Google custom site search for your website. I’m using it on a wordpress site but this article is relevant to any site. Here is the code you get from Adsense account for site custom search box:

<form action="http://infoheap.com/search/" id="cse-search-box">
<div>
  <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx" />
  <input type="hidden" name="cof" value="FORID:10" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="text" name="q" size="20" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

This loads a javascript and a watermark image from Google. These days most people search for content on Google. Even when users click on a result and come to a web site, they often don’t search on that web site. They prefer to go back to Google and search. So custom site search is not really a highly used feature.

Moreover with mobile device being popular, saving even one javascript is good for user experience. Here is another approach you can use where you place some search image or button on site and when user clicks on it, laod the javascript. This will lead to one extra click for some users but faster site load for most users.

Here are the steps you can use:

Replace search box with a search image. e.g.

<div id="searchdiv"><img width=24 height=24 src="/img/search_icon-24.png"></div>

Here is how it looks:

Place this inline javascript somewhere in the end of the html document. Preferably just before </body> tag. Placing javascript in the end of the document is always a good idea and should be done whenever possible. You may want to make changes to the code in case you are using different div names.

var searchcontent = '<form action="http://infoheap.com/search/" id="cse-search-box">'
    + '<div>'
    +   '<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx" />'
    +   '<input type="hidden" name="cof" value="FORID:10" />'
    +   '<input type="hidden" name="ie" value="UTF-8" />'
    +   '<input type="text" name="q" size="20" />'
    + '</div>'
    + '</form>';
function ih_search_prepare () {
  jQuery('#searchdiv img').click(function(){
    jQuery('#searchdiv').remove('img');
    jQuery('#searchdiv').html(searchcontent);
    jQuery.getScript("http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en")
  });
}
jQuery(document).ready(function() {ih_search_prepare();});

This will attach a click handler to the search image. The click handler will embed html Google custom site search box code in searchdiv and also fetch the javascript needed for custom site search.

Here is how it looks when clicked:
google-cse-after-click Now user can type the query and do search using Google custom site search.

How to use Google custom search with lazy loading approach

Suggested posts: