Share
Acest tutorial vă va arăta cum să utilizați feedul "Interogări populare" de la motorul dvs. personalizat de căutare Google (CSE) ca sursă de date pentru un autocompletă jQuery.
Motorul de căutare personalizat Google (CSE) vă permite să creați o funcție robustă de căutare pentru site-ul dvs. Web. Ei oferă gratuit,
versiune acceptată de anunțuri și o versiune de afaceri premium care începe de la 100 USD pe an. În plus, CSE oferă o gamă largă de valori, variind de la integrarea cu
Google Analytics la un flux de interogări de căutare populare.
Acest tutorial vă va arăta cum să utilizați PHP și jQuery pentru a adăuga o caracteristică completă automată la caseta de căutare prestabilită a CSE folosind feedul de interogări de căutare populare ca sursă de date.
Pentru a utiliza cu succes această tehnică pe site-ul dvs., veți avea nevoie de propriul Google CSE și de o cantitate decentă de trafic de căutare (pentru a ne asigura că avem un set frumos de date pentru
lista noastră automată completă).
Nu vă faceți griji dacă nu îndepliniți toate aceste cerințe - puteți continua de-a lungul. Google citează adesea implementarea CSE a MacWorld
ca exemplu, așa că voi folosi feedul lor de căutare în acest tutorial. Simțiți-vă liber să faceți același lucru dacă doriți.
Să începem.
Primul lucru pe care îl vom face este să adăugăm codul de căutare implicit al CSE la o nouă pagină XHTML. Puteți găsi acest lucru conectându-vă la panoul de control și făcând clic pe "cod". O sa
arata ceva de genul asta.
Salvați acest document într-un director nou ca search.html și deschideți-l în browser. Căutați ceva pentru a vă asigura că caseta de căutare funcționează.
Deși utilitarul jQuery are o funcție completă automată încorporată, puteți găsi
plugin complet automat creat de Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar și Jörn Zaefferer este ușor de folosit. Descarca
jquery.autocomplete.zip și dezarhivați-l.
Arhiva pluginului conține o varietate de scripturi diferite pentru multe implementări. În timp ce cea mai bună practică ar fi să mutați scripturile și foile de stil
mergând la foldere numite în interiorul rădăcină a paginii noastre, în interesul simplității, hai să tragem
dosarul "jquery-autocomplete" în directorul în care se află search.html-ul nostru.
Pluginul vine cu un demo care ilustrează modul în care ar putea fi utilizată funcția completă automată cu numele orașelor. Să ne asigurăm că jQuery și plugin-ul nostru funcționează corect
prin cuplarea casetei noastre de căutare Google până la lista orașelor. În search.html, adăugați următoarele în interiorul
De asemenea, va trebui să modificăm ușor codul de căutare implicit al CSE prin adăugarea unui atribut id în caseta de căutare. O vom numi "cse_search".
Salvați search.html și deschideți-l în browser. În caseta de căutare, începeți să introduceți numele unui oraș; ar trebui să vedeți meniul de completare automată.
În pasul anterior, am inclus scriptul "jquery-autocomplete / demo / localdata.js". Dacă deschideți fișierul și îl priviți, veți vedea câteva lucruri diferite
Jetoane JavaScript. Acestea sunt matricele utilizate pentru a popula listele automate complete în fișierele demo ale pluginului. Când am inițializat jQuery și am instruit plugin-ul
pentru a completa automat caseta noastră "cse_search", i-am spus, de asemenea, să obțină datele sale din matricea orașelor:
$ () () () () () ().
Acum trebuie să instruim jQuery să folosească feedul nostru popular de interogări ca sursă de date. Dar cum?
Vom folosi un pic PHP pentru a trage feed-ul de interogări populare, pentru a-l analiza și a reda un tablou JavaScript valid. Prin includerea fișierului PHP ca și noi
un fișier JavaScript obișnuit, acesta va fi executat în spatele scenei, iar browserul Web va crede că citește un fișier JS static.
În plus, vom completa, de asemenea, feedul nostru de interogări populare cu termeni pe care îi specificăm. Termenii pe care îi specificăm aici nu pot fi percheziționați frecvent
suficient pentru a aparea ca o "interogare populara", dar ele ar putea fi utile in lista noastra completa. De exemplu, termenii pentru care ați creat
Google a subscris link-uri sau termeni care au venituri bune în bani
AdSense pentru căutare.
Creați un fișier în dosarul "jquery-autocomplete" numit searchdata.php și lipiți-l în următoarele:
Accentsconagua
element ca element $) $ search_term = strtolower (trim ($ item-> title)); // trim () este folosit pentru a elimina zonele de alb. dacă (! in_array ($ search_term, $ data)) // asigurați-vă că nu există duplicate. $ date [] = $ căutare_term; // adăugați $ search_term la matricea de date. sort ($ date); // alfabetizați matricea // Formatați datele pentru ieșirea JavaScript. foreach (date $ ca $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Să informăm browserul că trimitem JavaScript. header ("Tip de conținut: text / javascript \ n \ n"); // În continuare vom ieși din PHP și vom crea o matrice JavaScript. În interiorul matricei, vom reveni la // PHP și vom folosi implode () pentru a returna un șir separat prin virgulă a tuturor datelor din $ js_data. ?> var searchdata = []; 
Dacă utilizați propriul dvs. feed CSE, veți dori să înlocuiți adresa URL pe linia 7. În acest exemplu, am folosit feedul global de interogări populare pentru MacWorld.com.
Puteți utiliza propriul flux general de interogări populare accesând pagina Gestionați paginile> Statistică>
Per total. Alte opțiuni disponibile sunt feedurile populare de interogare în funcție de zi, săptămână și lună.
Apoi, va trebui să eliminăm scriptul localdata.js al demo-ului din search.html și să îl înlocuim cu fișierul searchdata.php:
A inlocui: Cu:
De asemenea, va trebui să modificăm ușor codul de inițializare:
Înlocuiește: $ ("# cse_search"). Autocompleți (orașe); Cu: $ ("# cse_search"); autocomplete (searchdata); Acum, să încărcăm totul pe server și să oferim search.html o fotografie. Dacă totul funcționează așa cum trebuia, mașina dvs. a fost completată
ar trebui să funcționeze perfect.
Site-urile care primesc o cantitate semnificativă de trafic pot dori să ia în considerare salvarea câmpului de căutare. Având serverul analiza alimentarea
de fiecare dată când o persoană introduce în caseta de căutare va folosi o cantitate semnificativă de resurse. Puteți cache rezultatele prin înlocuirea dvs.
fișierul searchdata.php cu următoarele:
Notă: Scriptul va crea memoria cache pentru prima dată, dar trebuie să aibă acces la scriere în directorul pe care îl utilizați
să o stocheze.
element ca element $) $ search_term = strtolower (trim ($ item-> title)); // trim () este folosit pentru a elimina zonele de alb. dacă (! in_array ($ search_term, $ data)) // asigurați-vă că nu există duplicate. $ date [] = $ căutare_term; // adăugați $ search_term la matricea de date. sort ($ date); // alfabetizați matricea // Formatați datele pentru ieșirea JavaScript. foreach (date $ ca $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Configurarea cache-ului $ fp = fopen ($ cache_path, "w"); // Crearea matricei JavaScript $ js_array = "var searchdata = [". implode ($ js_data, ","). "];" // Scrie matricea în cache fwrite ($ fp, $ js_array); // Închideți cache-ul fclose ($ fp); // Includeți fișierul cache. includ ($ cache_path); ?>
