Hi guys,

Here I am going to share how to make your own google instant search by using Jquery and Google Custom Search.

  1. Visit Google Custom Search Engine ( you will need to have an account with Google or with G-mail). Once you are there, it will ask you for basic information about your customized search engine. These fields are:
    I) Add Title of your custom search engine (it will show up in the title bar).
    II) Add description for your search page.
    III) Add some major keywords for your custom search engine.
    IV) Select your preferable language.
    V) Select world wide web search OR your blog/website search option. Since I am planning to monetize my personal blog, I will pick “Only sites I select” for this option.
    VI) Add your blog URL. Again, I am planning to add this custom search engine only to my personal blog. Therefore, I will only add my blog URL. If you like, you can add other website or your other blog URLs here.
    VII) Select “Show ads on result pages” for the next option. It will show Google Adsense ads on the search result pages. This will add some extra revenue to your monthly income.
    VIII) Read Google Custom Search Engine Terms and select the box IF you agree with the Google terms of service.
  2. Click the “Next” button at the very bottom. It will finish the initial setup for your custom search engine. You can try out the search engine on this page and have a confirmation e-mail sent to you, if you wish.
  3. Click the “Finish” button. It will take you to the Google CSE homepage or management page. Your recently created custom search engine should show up in the list here.
  4. Now, click on the “control panel” link. It will take you to the initial setup that we have just done on step #1. Once you are there, you can see a few other options on the menu bar or the top navigation bar, such as : [Sites | Refinements | Look and feel | Code | Collaboration | Make money | New! Business Edition | Advanced | Preview]
  5. Click on Code from the top navigation button.

here is the code to execute query by Onkeyup event

<pre><script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  var customSearchControl = null;
  function executeQuery() {
    var textNode = document.getElementById('field');
    if ((textNode.value == '')) {
	customSearchControl.clearAllResults();
    } else {
      customSearchControl.execute(textNode.value);
    }
  }
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    customSearchControl = new google.search.CustomSearchControl('007901521029559732954:j0w97selnj0');
    customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.enableSearchResultsOnly();     
    customSearchControl.draw('cse_g', options);
  }, true);
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$().ready(function() {
	// if text input field value is not empty show the "X" button
	$("#field").keyup(function() {
		$("#x").fadeIn();
		if ($.trim($("#field").val()) == "") {
			$("#x").fadeOut();
		}
	});
	// on click of "X", delete input field value and hide "X"
	$("#x").click(function() {
		$("#field").val("");
		$(this).hide();
		//$("#cse_g").val('');
	});
});
</script>
</pre>

View Demo Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/01/google-instant-logo.preview1.jpghttp://w3lessons.info/wp-content/uploads/2012/01/google-instant-logo.preview1-150x150.jpgKarthikeyan KFreebiesjquerygoogle instant search
Hi guys,Here I am going to share how to make your own google instant search by using Jquery and Google Custom Search.Visit Google Custom Search Engine ( you will need to have an account with Google or with G-mail). Once you are there, it will ask you for basic information...