Share
Questo tutorial ti mostrerà come utilizzare il feed "Query popolari" dal tuo motore di ricerca personalizzato di Google (CSE) come origine dati per un completamento automatico di jQuery.
Il motore di ricerca personalizzato (CSE) di Google ti consente di creare una solida funzionalità di ricerca per il tuo sito web. Offrono un gratuito,
versione ad-supported e una versione business premium che inizia a $ 100 all'anno. Inoltre, CSE offre una vasta gamma di metriche, che vanno dall'integrazione con
Google Analytics a un feed di query di ricerca popolari.
Questo tutorial ti mostrerà come utilizzare PHP e jQuery per aggiungere una funzionalità di completamento automatico alla casella di ricerca predefinita di CSE utilizzando il popolare feed di query di ricerca come origine dati.
Per utilizzare con successo questa tecnica sul tuo sito, avrai bisogno del tuo Google CSE e di una discreta quantità di traffico di ricerca (per assicurarci di avere un bel set di dati per
la nostra lista completa automatica).
Non preoccuparti se non rispetti tutti questi requisiti, puoi comunque seguirlo. Google cita spesso l'implementazione CSE di MacWorld
come esempio, quindi userò il loro feed di ricerca in questo tutorial. Sentiti libero di fare lo stesso, se lo desideri.
Iniziamo.
La prima cosa che faremo è aggiungere il codice di ricerca predefinito di CSE a una nuova pagina XHTML. Puoi trovarlo accedendo al pannello di controllo e facendo clic su "codice". Lo farà
assomiglia a questo.
Salva questo documento in una nuova cartella come search.html e aprilo nel tuo browser. Cerca qualcosa per assicurarti che la casella di ricerca funzioni.
Sebbene l'interfaccia utente di jQuery abbia una funzione di completamento automatico integrata, potresti trovare il file
il plug-in automatico completo creato da Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar e Jörn Zaefferer è un po 'più facile da usare. Scaricare
jquery.autocomplete.zip e decomprimilo.
L'archivio del plugin contiene una varietà di script diversi per molte implementazioni. Mentre la migliore pratica sarebbe spostare gli script e i fogli di stile che siamo
andando a utilizzare le cartelle opportunamente denominate all'interno della radice della nostra pagina, nell'interesse della semplicità, trasciniamo semplicemente il
cartella "jquery-autocomplete" nella cartella in cui si trova search.html.
Il plugin viene fornito con una demo che illustra come il completamento automatico può essere utilizzato con i nomi di città. Assicuriamoci che jQuery e il nostro plugin funzionino correttamente
agganciando la nostra casella di ricerca di Google fino all'elenco delle città. In search.html, aggiungi quanto segue all'interno di
Dovremo anche modificare leggermente il codice di ricerca predefinito di CSE aggiungendo un attributo id alla casella di ricerca. Lo chiameremo "cse_search".
Salva search.html e aprilo nel tuo browser. Nella casella di ricerca, inizia a digitare il nome di una città; dovresti vedere il menu di completamento automatico.
Nel passaggio precedente, abbiamo incluso lo script "jquery-autocomplete / demo / localdata.js". Se apri il file e lo guardi, ne vedrai alcuni diversi
Array JavaScript. Questi sono gli array utilizzati per popolare gli elenchi completi automatici nei file demo del plugin. Quando inizializzammo jQuery e istruimmo il plugin
per completare automaticamente la nostra casella "cse_search", gli abbiamo anche detto di ottenere i suoi dati dall'array delle città:
Accentsconagua
$ (). ready (function () $ ("# cse_search"). autocomplete (cities);); Ora dobbiamo istruire jQuery per utilizzare il nostro popolare feed di query come fonte di dati. Ma come?
Useremo un po 'di PHP per inserire il popolare feed di query, analizzarlo ed echo su un array JavaScript valido. Includendo il file PHP come faremmo
un normale file JavaScript, verrà eseguito dietro le quinte e il browser Web penserà che stia leggendo un file JS statico.
Inoltre, integreremo anche il nostro feed di query più diffuso con i termini da noi specificati. I termini che specifichiamo qui potrebbero non essere ricercati spesso
abbastanza da apparire come una "query popolare", ma potrebbero comunque essere utili nella nostra lista di completamento automatico. Ad esempio, i termini per i quali hai creato
Link o termini sottoscritti da Google che monetizzano bene con
AdSense per la ricerca.
Crea un file all'interno della cartella "jquery-autocomplete" chiamata searchdata.php e incolla quanto segue:
oggetto come $ item) $ search_term = strtolower (trim ($ item-> title)); // trim () è usato per rimuovere gli spazi bianchi. if (! in_array ($ search_term, $ data)) // assicurati che non ci siano duplicati. $ data [] = $ search_term; // aggiungi $ search_term all'array di dati. sort ($ data); // alphabetize the array // Formatta i dati per l'output di JavaScript. foreach ($ data come $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Informiamo il browser che stiamo inviando JavaScript. intestazione ("Content-type: text / javascript \ n \ n"); // Avanti scappiamo da PHP e creiamo un array JavaScript. All'interno dell'array, torneremo a // PHP e useremo implode () per restituire una stringa separata da virgole di tutti i dati all'interno di $ js_data. ?> var searchdata = []; 
Se stai utilizzando il tuo feed CSE, ti consigliamo di sostituire l'URL alla riga 7. In questo esempio, ho utilizzato il feed delle query più diffuse per MacWorld.com.
Puoi utilizzare il tuo feed di query più comuni generale andando alla pagina di gestione di CSE> Statistiche>
Complessivamente. Altre opzioni disponibili sono feed di query popolari per giorno, settimana e mese.
Successivamente, dovremo rimuovere lo script localdata.js della demo da search.html e sostituirlo con il nostro file searchdata.php:
Sostituire: Con:
Dovremo anche modificare leggermente il nostro codice di inizializzazione:
Sostituisci: $ ("# cse_search"). Completamento automatico (città); Con: $ ("# cse_search"). Autocomplete (searchdata); Ora cariciamo tutto sul server e diamo una ricerca a search.html. Se tutto funziona come dovrebbe, la tua auto completa
dovrebbe funzionare perfettamente.
I siti che ricevono una quantità significativa di traffico potrebbero voler prendere in considerazione la memorizzazione nella cache della matrice di ricerca. Avere il server analizzare il feed
ogni volta che qualcuno digita nella casella di ricerca utilizzerà una quantità significativa di risorse. Puoi mettere in cache i risultati sostituendo il tuo
file searchdata.php con il seguente:
Nota: Lo script creerà la cache per la prima volta, ma deve avere accesso in scrittura alla directory in cui ti trovi
andando a conservarlo.
oggetto come $ item) $ search_term = strtolower (trim ($ item-> title)); // trim () è usato per rimuovere gli spazi bianchi. if (! in_array ($ search_term, $ data)) // assicurati che non ci siano duplicati. $ data [] = $ search_term; // aggiungi $ search_term all'array di dati. sort ($ data); // alphabetize the array // Formatta i dati per l'output di JavaScript. foreach ($ data come $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Imposta la cache $ fp = fopen ($ cache_path, "w"); // Crea l'array JavaScript $ js_array = "var searchdata = [". implode ($ js_data, ","). "];"; // Scrivi la matrice sul cache fwrite ($ fp, $ js_array); // Chiudi la cache fclose ($ fp); // Include il file di cache. include ($ cache_path); ?>
