Jquery: Búsqueda Instantanea parte 2

Como prometí aqui va la segunda parte del tutorial para búsqueda instantanea, voy a mostrar como adaptarlo a 2 páginas web distintas en el primer caso una forma simple usando la web de NeoTeo y para el segundo caso voy a hacer un Flickr Instant usando su respuesta JSON.

NeoTeo

En este caso no existe una respuesta JSON que podamos parsear y mostrar así que usaré un iframe con id «miframe» que transmita mi búsqueda y la muestre. Para ello voy a usar una sola función llamada «getTopSearchResult» la que a su vez invoca la función doneWorking que básicamente nos indica que la búsqueda fue exitosa, ya hablaré de esta más adelante.

1
2
3
4
5

function getTopSearchResult(keyword) {
var the_url = 'http://www.neoteo.com/tag/'+keyword+'.neo';
doneWorking();
$("#miframe").attr('src', the_url);
}

Flickr Instant

Flickr al igual que la gran mayoría de portales web 2.0 si ofrece resultados en formato Json, asi que voy a provecharme de esta característica para buscar resultados y luego poder mostrarlos correctamente ordenados.

Primero voy a buscar resultados con esta función:

1
2
3
4
5

function getTopSearchResult(keyword) {
var the_url = 'http://api.flickr.com/services/feeds/photos_public.gne?tags='+encodeURIComponent(keyword)+'&format=json&jsoncallback=?';
$.getJSON(the_url, displayImages);
doneWorking();
}

Ahora el problema es convertir ese resultado json en algo más coherente y util para el usuario, lo que logro con la función «displayImages»

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

function displayImages(data) { // inicia la busqueda
////var iStart = Math.floor(Math.random()*(11));
// Empezamos
var htmlString = "<ul>";

// Mostramos resultados
$.each(data.items, function(i,item){
// Decimos que muestre thumbnails cuadrados
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");

// Empezamos a mostrar uno por uno
htmlString += '<li><a href="' + item.link + '" target="_blank">';
htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '" border="0" />';
htmlString += '</a></li>';
});

// Finalmente llenamos el DIV
$('#imagesWrapper').html(htmlString + "</ul>");
}

Este método es válido para cualquier resultado json de donde sea que provengam basta alterar los nombres de las variables que no siempre son link, title, etc

Ver Demo
Download

Jquery: Búsqueda Instantanea parte 2

NeoTeo

Flickr Instant

1 Comentario

¿Quién soy?