Anda di halaman 1dari 4

Correo electrónico Contraseña

Entrar

No cerrar sesión ¿Has olvidado tu contraseña?

Regístrate Facebook te ayuda a comunicarte y compartir tu vida con las personas que conoces.

Google Custom Search Ajax API – Few more Examples


de Web Scripting, el sábado, 12 de diciembre de 2009 a las 17:30

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
Notas de Web Scripting Engine).

Notas sobre Web Scripting


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
Suscribirse options.
Notas de Web Scripting
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.

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" alig


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.

Share it! var addthis_pub = 'satya61229'; var addthis_language =


'en';var addthis_options = 'digg, print, dzone, twitter, delicious, google, facebook,
reddit, live, more';

Related posts:
1. Google Custom Search by Aleem Bawany
2. Setting Site Restriction to Google Ajax Search API
3. Google Ajax Search API – Description and Example

© Satya for Web Scripting, 2009. | Permalink | No comment | Add to del.icio.us, dZone
Post tags: Ajax, ajaxsearchapi, api, google, search

Permalink + Comments

Comentar · Me gusta · Ver la publicación original · Compartir

Facebook © 2010 · Español (España) Acerca de · Publicidad · Desarrolladores · Empleo · Privacidad · Condiciones · Servicio de ayuda

Anda mungkin juga menyukai