08Sep 2010 9 Comments */?>

Como crear tu propio Google Instant Search

Categorías: Tutoriales - Tags:

Me pareció tan interesante esta nueva función de Google que me dio por probar como hacer para tener mi propio Google instant search.

Lo primero que pense fue en utilizar Ajax autosuggest + un buscador por relevancia pero antes de empezar a mirar me acorde de que Google ofrece su propio buscador gracias a Google AJAX Search API .

Por lo que después de hacer algunas pruebas llegue a crear este Google instant search casero

Lo único que hice fue crear un evento keyup que envíe el formulario cada vez que ingresamos una letra en el buscador. Solución bastante tonta pero útil. Esta claro que no es como Google instant search pero da un curioso efecto muy parecido.

Para empezar debemos obtener la clave API de google si aun no la tenes.

Luego tan solo debemos incluir los archivos necesarios y crear una búsqueda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 <script src="http://www.google.com/jsapi?key=TUCLAVEAPI" type="text/javascript"></script>
    <script type="text/javascript" src="../jquery.js"></script>
    <script language="Javascript" type="text/javascript">
 
    google.load("search", "1");
 
    function OnLoad() {
 
 // creamos el objeto search control
  var searchControl = new google.search.SearchControl();
 
// Especificamos que queremos el menu expandido y que es un WebSearch() o una búsqueda en web( se puede realizar búsquedas de imágenes , etc
  options = new google.search.SearcherOptions();
  options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
  searchControl.addSearcher(new google.search.WebSearch(), options);
 
 // Le decimos al elemento que se dibuje dentro de searchcontrol
      searchControl.draw(document.getElementById("searchcontrol"));
 
//funcion JQuery que se encarga de enviar la búsqueda cada vez que escribimos una letra
	 $('.gsc-input').keyup(function(){
		 searchControl.execute($('.gsc-input').text());
	 });
 
    }
 
//llamada de la funcion onload
    google.setOnLoadCallback(OnLoad);
 
    </script>

Por otro lado tan solo creamos el <div id=”searchcontrol”>Loading…</div> en nuestra web y listo. Con eso ya lo tendriamos funcionando.

Si quieren lo pueden aplicar solo a su web usando un Custom Search Control y quedaría de la siguiente forma: Google instant Casero II

Para ello primero obtenemos el código CSE y luego modificamos el script para que quede de la siguiente manera

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
    google.load("search", "1");
 
    function OnLoad() {
 
 // Creamos el nuevo Custom Search Control. Aca debes aplicar tu propio código CSE
  var customSearchControl = new google.search.CustomSearchControl('011971341102232723356:t7795sj3o-k');
 
 // Hacemos que se dibuje en el div
      customSearchControl.draw(document.getElementById("searchcontrol"));
 
	 $('.gsc-input').keyup(function(){
		 customSearchControl.execute($('.gsc-input').text());
	 });
 
    }
    google.setOnLoadCallback(OnLoad);
</script>

Espero que les haya gustado. Saludos!!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Diana

    Excelente post, ademas el buscador de google siempre es requerido. si pones uno en tu pagina, tienes mas probabildades de que tus visitantes sigan estando en tu pagina y buscando desde ahi.

  • Rodrigo

    Deberias estar trabajando para Google men!

  • Gustavo

    Muy interesante el tutorial, pero si quiero que en vez de buscar en google lo haga dentro de mi web como un buscador interno de contenidos, habra alguna manera de adaprtarlo o no.

  • Gustavo la segunda parte del tutorial explica precisamente eso. Necesitas obtener tu código CSE , que al obtenerlo le decis al buscado que solo busque en tu web y listo.

  • Ivans

    Excelente amigo muy muy interesante!

  • LeonKmx

    Cuando vi por primera vez el INSTANT SEARCH de google, se me ocurrio que sería la SOLUCION ideal, para las busquedas en un Sistema de Facturacion en php, ya que si vas a buscar un producto de una lista de 1,000 articulos es fastidioso estar mostrando resultados y que el usuario los escoja. Con esta tecnologia seria mas facil y mas rapido facturar. El problema es que no tengo ni idea de como se hace jajaja…

  • Alejandro

    Hola alguien sabe como puedo hacer mi propio Google Instant Preview, si es posible para richfaces seria mucho mejor

  • Valerie

    Muy bueno el tutorial , pero quiero saber alguna otra forma de hacerlo , podrian ?

  • ISAAC

    Tengo una duda respecto a al clave api que mencionas ahí, en la liga que nos das dice que solo la puedes usar por 1000 peticiones la día, y que solo es material de prueba, no hay alguna manera de poderlo desarrollar de manera permanente, o que onda, ojala y puedas contestar… Grax.