Another Google-Day.

Adesso tocca al codice Javascript usato da Google Suggest. Usa un meccanismo simile a quello di GMail, ma in una pagina molto più semplice. Per nostra fortuna gli investigatori di Slashdot hanno già fatto buona parte del lavoro necessario per capirne il funzionamento:

Il sorgente della pagina è abbastanza semplice; la maggior parte del lavoro accade in una libreria JavaScript condensata. Non è facile da leggere (condensata significa nomi di funzioni e variabili di 1 o 2 caratteri, e tutti gli spazi estranei rimossi), ma in realtà non è troppo complessa.
Prima disabilita l’autocompletamento del browser (per ovvie ragioni). Poi definisce una <div> nascosta per i contenuti del menù a tendina dell’autocompletamento (varia a seconda dei browser … incompatibilità).
Ogni volta che si digita un carattere, il corpo della <div> viene popolato con i risultati di una veloce e minimale query mandata a Google.

Per esempio, se abbiamo digitato “slash”, quando viene rilasciato il tasto h, tramite XMLHttpRequest viene inviata una query all’indirizzo http://www.google.com/complete/search?hl=en&js=true&qu=slash (sostituite qualsiasi altro termine a “slash”, per sperimentare). La risposta che arriva da Gooogle è un semplice blocco di testo:
sendRPCDone(frameElement, "slash", new Array("slashdot", "slash", "slashdot.org", "slash dot", "slash fiction", "slashdot rss", "slash and burn", "slashdot.com", "slash fanfiction", "slashdotorg"), new Array("8,960,000 results", "2,770,000 results", "1 result", "389,000 results", "802,000 results", "2,540,000 results", "470,000 results", "1 result", "132,000 results", "966 results"), new Array(""));

Questo blocco di JavaScript viene eseguito per popolare la <div> con i nuovi contenuti del menu a tendina:

E’ possibile verificare la corrispondenza.

Google Suggest non esegue ogni volta una ricerca, ma con ogni probabilità va a pescare i risultati in un array associativo (non proprio: un trie) che contiene i risultati delle ricerche più popolari e dei numeri dei risultati. Questo spiegherebbe la straordinaria velocità di risposta (un solo lookup in un array associativo e poche decine di caratteri da trasferire ad ogni nuovo carattere inserito).

Continua lo ./er:

Cool. Concetto interessante, bella esecuzione. E una di quelle aggiunte che sono ovvie solo a posteriori.

Update: LiveSearch, per aggiungere l’autocompletamento alle ricerche del proprio sito, con codice Open Source e un pò di spiegazione. Sempre via ./.