Google Custom Search Ajax API – Few more Examples

Here you will get few more examples of Google Custom Search Ajax API. If you are new to custom search engine then you will think how it will look and how to use various search hosting options Google has provided in Custom Search Engine.
So, here you will get glimpse of three hosting options of CSE (Custom Search Engine).

If you do not want to read the whole article but just want to see what are the options and how it looks then you can follow this link for demo of the search options.

If you are in hurry then sign-in here for your Custom Search Engine. After your signing you will receive Custom Search Engine ID. At every places, my use of name value pair for CX is the CSE Id (name="cx" value="partner-pub-4441905138518539:wtgjmpb7npi"). In my three example, it can be different at each place due to different custom search engines I have created.

Here, I just want to show you basic differences of each option. When I tried to learn the Custom Search Engine API then I need to read a lot for getting these options meaning and how it work. After reading this article your understanding of the Custom Search Engine document will increase and you can concentrate on important functionalities. It will also help you decide which hosting option you need.

Google Custom Search Hosting Options

You will get three kind of hosting options - Search Element, Iframe, and Google hosted. Click the above image (will open in new window) to get the idea of the three options.

First one, I will like to describe is Iframe Hosting Option.

With this iframe option, you can target you search result in IFrame. Targeting it to new page also works.

 <strong>Hosting Option - Iframe. Provides limited customization and requires a separate page for results on your site.</strong>
  <form action="/web-development/custom-search/gcs-iframe-srch-result.html" target="iframe1"  id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-4441905138518539:wtgjmpb7npi" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
<iframe name="iframe1" width="880" height="600" border="0" src="/web-development/custom-search/gcs-iframe-srch-result.html" align="left"></iframe>

You can remove the target attribute from the form and the search result will target to the page in action attribute.
This is the page mentioned in action or iframe element src attribute of the form above. The code written here is provided by Google after your customization there.


<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 880;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

Search Element Hosting Option

This will allow you to have an input box for search term and search result at the same page. and also benefits of this is that your will get the search result with page load. User do not have to leave the page.


<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function(){
    var customSearchControl = new google.search.CustomSearchControl('partner-pub-4441905138518539:wtgjmpb7npi');
    customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<style type="text/css">
  .gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #F6F6F6;
    background-color: #FFFFFF;
  }
  input.gsc-input {
    border-color: #BCCDF0;
  }
  input.gsc-search-button {
    border-color: #336699;
    background-color: #E9E9E9;
  }
  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #E9E9E9;
    background-color: #E9E9E9;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-top-color: #FF9900;
    border-left-color: #E9E9E9;
    border-right-color: #E9E9E9;
    background-color: #FFFFFF;
  }
  .gsc-tabsArea {
    border-color: #E9E9E9;
  }
  .gsc-webResult.gsc-result {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gsc-webResult.gsc-result:hover {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gs-webResult.gs-result a.gs-title:link,
  .gs-webResult.gs-result a.gs-title:link b {
    color: #9E5205;
  }
  .gs-webResult.gs-result a.gs-title:visited,
  .gs-webResult.gs-result a.gs-title:visited b {
    color: #F5DEB3;
  }
  .gs-webResult.gs-result a.gs-title:hover,
  .gs-webResult.gs-result a.gs-title:hover b {
    color: #0000FF;
  }
  .gs-webResult.gs-result a.gs-title:active,
  .gs-webResult.gs-result a.gs-title:active b {
    color: #0000FF;
  }
  .gsc-cursor-page {
    color: #9E5205;
  }
  a.gsc-trailing-more-results:link {
    color: #9E5205;
  }
  .gs-webResult.gs-result .gs-snippet {
    color: #000000;
  }
  .gs-webResult.gs-result .gs-visibleUrl {
    color: #E1771E;
  }
  .gs-webResult.gs-result .gs-visibleUrl-short {
    color: #E1771E;
  }
  .gsc-cursor-box {
    border-color: #FFFFFF;
  }
  .gsc-results .gsc-cursor-page {
    border-color: #E9E9E9;
    background-color: #FFFFFF;
  }
  .gsc-results .gsc-cursor-page.gsc-cursor-current-page {
    border-color: #FF9900;
    background-color: #FFFFFF;
  }
  .gs-promotion.gs-result {
    border-color: #336699;
    background-color: #FFFFFF;
  }
  .gs-promotion.gs-result a.gs-title:link {
    color: #0000CC;
  }
  .gs-promotion.gs-result a.gs-title:visited {
    color: #0000CC;
  }
  .gs-promotion.gs-result a.gs-title:hover {
    color: #0000CC;
  }
  .gs-promotion.gs-result a.gs-title:active {
    color: #0000CC;
  }
  .gs-promotion.gs-result .gs-snippet {
    color: #000000;
  }
  .gs-promotion.gs-result .gs-visibleUrl,
  .gs-promotion.gs-result .gs-visibleUrl-short {
    color: #008000;
  }
</style>

Hosting Option: Google Hosted search result

Search result will be hosted at google. This means that when user click on search term box, he will be redirected to google.com with the search result. This option does not have many benefits as others two options mentioned above have. So, this can be the least preferred method for you.


<form action="http://www.google.com/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-4441905138518539:wtgjmpb7npi" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

Whatever I have mentioned was just the basic difference of various hosting options, which gave you idea of all search result hosting options. You can now use this link for getting full list of differences and benefits available under each hosting options.
Watch demo of the search hosting options.
Here is one more example of Custom search engine - http://indiandomains.satya-weblog.com/

Comments are open for an year period. Please, write here on Facebook page.