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.
[cc lang=»javascript»]
function getTopSearchResult(keyword) {
var the_url = ‘http://www.neoteo.com/tag/’+keyword+’.neo’;
doneWorking();
$(«#miframe»).attr(‘src’, the_url);
}
[/cc]
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:
[cc lang=»javascript»]
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();
}
[/cc]
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»
[cc lang=»javascript»]
function displayImages(data) { // inicia la busqueda
////var iStart = Math.floor(Math.random()*(11));
// Empezamos
var htmlString = «
- «;
- ‘;
htmlString += ‘‘;
htmlString += ‘
// 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 += ‘
‘;
});
// Finalmente llenamos el DIV
$(‘#imagesWrapper’).html(htmlString + «
«);
}
[/cc]
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
