Usare le Google AJAX search API
Torniamo un po' a sporcarci le mani con il codice, che fa sempre bene. Oggi vediamo come utilizzare le Google AJAX search API, un nome lungo, per identificare le API del servizio di ricerca del buon vecchio Google.
Le API sono ancora un po' giovani IMVHO (ad esempio non è possibile personalizzare a fondo i CSS del modulo di ricerca, ritornano pochissimi risultati), ma promettono davvero bene: è possibile anche cercare video, e utilizzare le Google Maps.
In questo tutorial vediamo come costruire un motorino di ricerca che effettua ricerche sia all'interno di un dominio che all'interno di tutti i blog indicizzati da Google Blogsearch. Utile se avete un blog, ma non solo.
Per prima cosa richiediamo una API KEY a questo indirizzo. La procedura è davvero semplice, ci viene fornito anche un piccolo script già funzionante (con CSS Google incluso, fate attenzione, lo dovete usare), da poter testare subito.
Una volta ottenuta la nostra chiave procediamo alla costruzione della funzione init() che si occuperà di creare il nostro motore di ricerca al caricamento della pagina. La sintassi non è chiarissima come quella delle Google Maps, ma la documentazione e gli esempi in qualche modo aiutano.
La funzione è tutta qui:
function init() { // Crea un searchcontrol var searchControl = new GSearchControl(); // Imposto visualizzazione con tabs var drawOptions = new GdrawOptions(); drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED); // Imposto modalità di ricerca su Napolux.com e tutti i blog. var siteSearch = new GwebSearch(); var blogSearch = new GblogSearch(); // Label per la tab siteSearch.setUserDefinedLabel("Cerca in Napolux.com"); blogSearch.setUserDefinedLabel("Cerca in tutti i blog"); // Restringo la ricerca web al dominio Napolux.com siteSearch.setSiteRestriction("napolux.com"); // Aggiungo i due "searcher" all'oggetto searchcontrol searchControl.addSearcher(siteSearch); searchControl.addSearcher(blogSearch); // Disegno tutto a video nella div "searchcontrol" passando le opzioni searchControl.draw(document.getElementById("searchcontrol"),drawOptions); // Esegue la prima ricerca con la chiave PHP passata come parametro searchControl.execute("php"); }
Come al solito il codice si spiega da solo, le funzioni "sono quelle", poco parametrizzabili purtroppo. Un esempio di quello che si può realizzare lo trovate qui, potete ricopiarlo tranquillamente cambiando la API key.
Vota!
Loading ...Articoli che potrebbero interessarti
Ajax for dummiesCercasi programmatore AJAX
Google Blog Search aggiunge il ping
15 Links AJAX
40 links di-a-da-in-con-su-per-tra-fra Google
21 Febbraio 2007 alle 15:11
Noi abbiamo usato le API in modo leggermente diverso su Daubau.it, riuscendo a customizzare completamente il form di ricerca e i risultati. Ecco il codice:
var webSearch = new GwebSearch();
webSearch.setSiteRestriction(’daubau.it’);
webSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
webSearch.setNoHtmlGeneration();
var searchCallbackObject = new SearchCallbackObject(webSearch, id);
webSearch.setSearchCompleteCallback(searchCallbackObject, SearchCallbackObject.prototype.searchCompleteHandler);
webSearch.execute(q);
21 Febbraio 2007 alle 20:07
Bello DauBau!
31 Luglio 2007 alle 12:25
Ciao,
vorrei integrare questa fantastica ricerca nel mio blo su blogger…. ma in quanto a codice sono propio agli inizi….. Mi puoi dare una mano….
Come faccio a inserire il codice che hai postato nel blog in modo che funzioni tutto? Dove lo inserisco?
Questo è il mio sito di test: http://italian-sexy-girls.blogspot.com/
…come puoi vedere il search tool è uno schifo che ho trovato in google draft…. mi puoi dare una mano a renderlo più o meno come su questo sito: http://iake.blogspot.com/?
Ti ringrazio
Surfparadise
31 Luglio 2007 alle 15:02
Non ne ho proprio idea Surfparadise. E’ cmq anche un problema di CSS a quanto vedo…
31 Luglio 2007 alle 15:45
in che senso ha un problema di css??… ora ho il mio codice di ricerca che funziona…. come faccio a integrarlo?….
Il sito che ti ho linkato di test, ha la sua visione ottimale con firefox….
28 Gennaio 2008 alle 01:55
Ciao Napo, complimenti per l’articolo!
Volevo soltanto un piccolo chiarimento da parte tua, come si vede dal tuo esempio, utilizzi la funzione init.
Ma allora perché, come evidenzioato qui http://code.google.com/apis/maps/documentation/index.html al secondo punto della voce Using the Google AJAX API Loader, la stessa google dice di utilizzare questo codice:
google.load(”maps”, “2″);
ovvero al posto di utilizzare una funzione dichiarata da te, parte tutto dall’oggetto google. Ma a me non funziona….
PS: Sto sperimentando le google API per crearmi una mappa personalizzata, ma mi sono permesso di commentare qua perché, come scritto da te all’inizio dell’articolo, queste API vanno bene sia per le mappe che per le ricerche.
28 Gennaio 2008 alle 01:56
PS: ho visto che è passato un pò di tempo dalla pubblicazione del tuo articolo, ma speravo potessi aiutarmi allo stesso modo
28 Gennaio 2008 alle 08:31
@Pr0v4
… Questa mi giunge nuova. Gli do un’occhiata…