Jquery: Búsqueda Instantanea parte 1

Últimamente se han puesto de moda las búsquedas instantaneas usando AJAX como el aún en prueba Google Instant o el script experimental para hacer un YouTube Instant, en realidad implementar soluciones así no es nada del otro mundo el verdadero problema radica en que generan un mayor tráfico y pueden sobrecargar el servidor si tienen demasiados usuarios.

En este tutorial de dos partes voy a destripar el codigo de youtube instant, simplificarlo un poco y mostrar como hacer los cambios para que funcione con cualquier sitio web 2.0 (entendiendo que esos son los sitios que cuentan con un API para acceder a su contenido externamente ya sea enformato XML o Json), este script podría funcionar con YouTube, Flickr, Google, Google Images, etc…

Sugerencias de Google

Como no cuento con una base de datos que contenga los términos más buscados y que además me corrija la ortografía y ofrezca posibles búsquedas, voy a hacer que Google se encargue de esa chamba y de eso trata la primera parte del tutorial.

Estructura del buscador

Básicamente sólo necesitamos un campo input, un span que nos indica la palabra clave que estamos buscando y un div que vaya a contener los resultados

1
2
3
4
5
6
7

<div id="header" class="clearfix">
<input id="searchBox" value="" class="statusPlaying"></input>
<span id="searchTermKeyword"><strong>Búsqueda Instantanea</strong></span>
</div>
<div id="resultadoDiv">
Resultados de la Búsqueda
</div>

Instant.js

Ahora necesito incluir jquery y este archivo instant.js que es el encargado de pedirle a google sugerencias para los términos de búsqueda y en la 2da parte además deberá conectarse con un API y darnos resultados.

Bueno veamoslo por partes:

Lo primero es crear las variables que nos indiquen el estado de la búsqueda y además asignen los eventos cuando escribo y cuando dejo de escribir

1
2
3
4
5
6
7
8
9
10
11
12

function iniciar() {
// Inicializa variables y eventos
currentSearch = '';
currentSuggestion = '';
xhrWorking = false; // Indica si la consulta XHR se esta ejecutando
searchPending = false; // Indica si hay otra busqueda
var searchBox = $('#searchBox');
searchBox.keyup(doInstantSearch);
searchBox.submit(doInstantSearch);
// Focus search box
searchBox.focus();
}

De esta forma cuando escribo un término ejecuta la funcion doInstantSearch que primero comprueba si hay cosas que buscar, luego borra la busqueda pasada y finalmente mediante AJAX le pide a Google que le envie palabras clave

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
31
32
33
34
35
36

A su vez esta función va a invocar a otra, fijémonos en la linea var the_url = ‘http://suggestqueries.google.com/complete/search?hl=es&hjson=t&jsonp=window.xt.handleResponse&q=’+encodeURIComponent(searchBox.val())+’&cp=1’;

Tenemos que procesar el array que nos envia google con posibles sugerencias para extraer unicamente la más acertada, también sería posible que se genere un combo con el resto de opciones pero para hacerlo más simple me voy a conformar con una.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

xt = {};
xt.handleResponse = function(suggestions) {
// Busca la 1era sugerencia
var searchTerm = parseSuggestionsString(suggestions);
// Si no hay sugerencias busca esa palabra
if (!searchTerm) {
searchTerm = keyword;
$('#searchTermKeyword').html(searchTerm+' (Exact search)');
} else {
$('#searchTermKeyword').html(searchTerm);
if (searchTerm == currentSuggestion) {
doneWorking();
return; //
}
}
/// Busca la primera URL
getTopSearchResult(searchTerm);
currentSuggestion = searchTerm;
}

Esa función a su vez debe llamar otra función encargada de parsear el array, una 2da funcion que devuelve datos y veré en la 2da parte del tutorial y finalmente una 3era función que finaliza la búsqueda.

Demo
Download

//// Actualización
Puedes ver la 2da parte de este tutorial AQUI

Jquery: Búsqueda Instantanea parte 1

Sugerencias de Google

Estructura del buscador

Instant.js

2 Comentarios

¿Quién soy?