Google AJAX Search es una API entregada por Google para implementar un buscador utilizando la tecnología AJAX. Este interfaz puede buscar sobre la web, imagenes, blogs y videos. Tambien se le puede restringir a que busque sobre un determinado dominio.

Veamos un ejemplo de como sería el buscador en el siguiente [tbox] enlace, http://www.google.com/uds/samples/apidocs/helloworld.html, Google AJAX Search, 310, 450[/tbox].

Entonces lo primero que tenemos que hacer es generar un Google API key, que nos servirá para hacer uso de este servicio. Para ello solo debemos ingresar el URL de la web donde vamos a colocar el buscador. Luego de ello se nos dará nuestro código y la confirmación de para que dominio funcionará.

googleajax1.gif

Empecemos entonces, creamos un html vacio en ingresamos en el tag HEAD un enlace a la hoja de estilos y otro enlace al javascript que hara la busqueda.

  1. <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
  2. <script src="http://www.google.com/uds/api?file=uds.js&amp;v=0.1&amp;key=mykey" type="text/javascript"></script>

En donde se tiene que mykey es tu codigo de Google Ajax Search que has generado. Luego tenemos que crear código javascript para instanciar al buscador. Esto se realiza con la clase GSearchControl. A continuación se debe definir que tipos de busqueda se va a realizar. Existen cuatro posibilidades:

  • GwebSearch(): para buscar en la web.
  • GvideoSearch(): para buscar videos en google.
  • GblogSearch(): busqueda en blogs.
  • GlocalSearch(): para realizar la busqueda en Google Local.

Para nuestro ejemplo haremos la busqueda sobre la web, videos y blogs, esto lo implementaremos sobre una funcion que llamaremos al cargar la página, entonces tendremos el siguiente código javascript.

  1. <script language="Javascript" type="text/javascript">
  2.   function OnLoad() {
  3.     var searchControl = new GSearchControl();
  4.     searchControl.addSearcher(new GwebSearch());
  5.     searchControl.addSearcher(new GvideoSearch());
  6.     searchControl.addSearcher(new GblogSearch());
  7.   }
  8. </script>

Lo que sigue es crear un campo DIV en el html donde se va a cargar el buscador, este div se debe crear en el BODY de tu html. Entonces se debe definir en el javascript que vamos a cargar el buscador sobre searchdiv. Y finalmente debemos ejecutar el buscador, esto se hace con el comando execute al cual se le pasa como parametro que palabra se va a buscar por defecto.

  1. searchControl.draw(document.getElementById("searchdiv"));
  2. searchControl.execute("Google");

Finalmente el código quedaría de la siguiente forma:

  3. <title>Google AJAX Search</title>
  4. <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
  5. <script src="http://www.google.com/uds/api?file=uds.js&amp;v=0.1&amp;key=mykey" type="text/javascript"></script>
  6.  
  7. <script language="Javascript" type="text/javascript">
  8.   function OnLoad() {
  9.     var searchControl = new GSearchControl();
  10.     searchControl.addSearcher(new GwebSearch());
  11.     searchControl.addSearcher(new GvideoSearch());
  12.     searchControl.addSearcher(new GblogSearch());
  13.  
  14.     searchControl.draw(document.getElementById("searchdiv"));
  15.     searchControl.execute("Google");
  16.   }
  17. </script>
  18. </head>
  19. <body onload="OnLoad()">
  20.     <div id="searchdiv"/>
  21. </body>
  22. </html>

Es muy simple, facil y rapido de implementar. Debo comentarles que hay mas opciones como por ejemplo restringir la busqueda a un deteminado dominio. Estos y demas opciones puedes encontrarle muy bien documentada en Google AJAX Search API Documentation.

Para los interesados en publicidad con este buscador, se planea que en la versión 1.0 se integrará publicidad de adsense. Por ahora estamos en la versión 0.1 asi que tenemos mucho camino por delante.