Share
Denne opplæringen viser deg hvordan du bruker "Popular Queries" -måten fra Google Custom Search Engine (CSE) som en datakilde for en jQuery-autofullføring.
Googles tilpassede søkemotor (CSE) lar deg opprette en robust søkefunksjon for ditt nettsted. De tilbyr en gratis,
annonse-støttet versjon og en premium forretningsversjon som starter på $ 100 per år. I tillegg gir CSE et bredt spekter av beregninger, som spenner fra integrering med
Google Analytics til en feed av populære søk.
Denne opplæringen vil vise deg hvordan du bruker PHP og jQuery for å legge til en automatisk komplett funksjon til CSEs standard søkeboks ved hjelp av de populære søkefeltene som datakilde.
For å kunne bruke denne teknikken på nettstedet ditt, trenger du din egen Google CSE og en anstendig mengde søketrafikk (for å sikre at vi har et fint sett med data for
vår automatiske komplette liste).
Ikke bekymre deg hvis du ikke oppfyller alle disse kravene - du kan fortsatt følge med. Google citerer ofte MacWorlds CSE-implementering
Som et eksempel, så bruker jeg deres søkemater i denne opplæringen. Ta gjerne det samme hvis du vil.
La oss komme i gang.
Det første vi skal gjøre er å legge til CSEs standard søkekode til en ny XHTML-side. Du kan finne dette ved å logge inn på kontrollpanelet og klikke på "kode". Det vil
se noe slikt ut.
Lagre dette dokumentet i en ny mappe som search.html og åpne den i nettleseren din. Søk etter noe for å sikre at søkeboksen fungerer.
Selv om jQuery brukergrensesnittet har en automatisk komplett funksjon innebygd, kan du finne
Automatisk komplett plugin laget av Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, og Jörn Zaefferer er litt enklere å bruke. nedlasting
jquery.autocomplete.zip og pakke ut den.
Pluggens arkiv inneholder en rekke forskjellige skript for mange implementeringer. Mens den beste øvelsen ville være å flytte skript og stilark vi er
Kommer til å bruke til riktig navngitte mapper inne i siden til vår side, for enkelhets skyld, la oss bare dra
"jquery-autocomplete" -mappen i mappen vår search.html er i.
Pluggen kommer med en demonstrasjon som illustrerer hvordan den automatiske kompletten kan brukes med bynavn. La oss sørge for at jQuery og vårt plugin fungerer som de skal
ved å hekte Google-søkefeltet opp til listen over byer. I search.html, legg til følgende inne i
Vi må også endre CSEs standard søkekode litt ved å legge til et id-attributt i søkeboksen. Vi kaller det "cse_search."
Lagre søk.html og åpne den i nettleseren din. I søkefeltet begynner du å skrive navnet på en by; Du bør se autofullføringsmenyen.
I det forrige trinnet inkluderte vi "skriptet" jquery-autocomplete / demo / localdata.js ". Hvis du åpner filen og ser på den, ser du et par forskjellige
JavaScript-arrays. Dette er arrays som brukes til å fylle automatiske komplette lister i plugins demofiler. Når vi initialiserte jQuery og instruerte plugin
for å fullføre vår "cse_search" -boks, fortalte vi det også om å få dataene fra bygruppene:
Accentsconagua
$ (). klar (funksjon () $ ("# cse_search"). autofullfør (byer);); Nå må vi instruere jQuery om å bruke våre populære søk som feedkilde. Men hvordan?
Vi bruker et lite PHP for å trekke i de populære spørringene, feed, parse det og ekko ut et gyldig JavaScript-utvalg. Ved å inkludere PHP-filen som vi ville
en vanlig JavaScript-fil, vil den bli utført bak kulissene, og nettleseren vil tro at den leser en statisk JS-fil.
I tillegg kommer vi også til å supplere våre populære søk, fôre med vilkår som vi spesifiserer. Vilkårene vi spesifiserer her, kan ikke søkte ofte
nok til å dukke opp som et "populært søk", men de kan fortsatt være nyttige å ha i vår komplette liste over biler. For eksempel, vilkår som du har opprettet
Google abonnerte koblinger eller vilkår som tjener penger godt
AdSense for Search.
Opprett en fil i mappen "jquery-autocomplete", kalt searchdata.php, og lim inn følgende:
element som $ element) $ search_term = strtolower (trim ($ item-> title)); // trim () brukes til å fjerne hvite rom. hvis (! in_array ($ search_term, $ data)) // sikre at det ikke er duplikater. $ data [] = $ search_term; // legg til $ search_term til datarray. sorter ($ data); // alfabetisere oppsettet // Format dataene for JavaScript-utgang. foreach ($ data som $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // La oss informere nettleseren om at vi sender JavaScript. header ("Innholdstype: tekst / javascript \ n \ n"); // Neste vil vi flykte fra PHP og opprette et JavaScript-system. Inne i arrayet går vi tilbake til // PHP og bruker implode () for å returnere en kommaseparert streng av alle dataene innenfor $ js_data. ?> var searchdata = []; 
Hvis du bruker din egen CSE-feed, vil du erstatte nettadressen på linje 7. I dette eksemplet brukte jeg de generelle populære spørringene for MacWorld.com.
Du kan bruke dine egne generelle populære søk ved å gå til CSE Behandle siden> Statistikk>
Alt i alt. Andre tilgjengelige alternativer er populære spørringsfeeder etter dag, uke og måned.
Deretter må vi fjerne demoens localdata.js-skript fra search.html og erstatte det med vår searchdata.php-fil:
Erstatte: Med:
Vi må også endre vår initialiseringskode litt:
Erstatt: $ ("# cse_search"). Autofullfør (byer); Med: $ ("# cse_search"). Autofullføring (søkedata); La oss nå laste opp alt til serveren og gi search.html et skudd. Hvis alt fungerer som det skal, fullfører bilen din
skal fungere perfekt.
Nettsteder som mottar en betydelig mengde trafikk, vil kanskje vurdere å cache søkeordet. Å ha serveren analysere strømmen
hver gang noen skriver inn i søkeboksen, vil det bli brukt en betydelig mengde ressurser. Du kan cache resultatene ved å erstatte din
searchdata.php-filen med følgende:
Merk: Skriptet vil opprette hurtigbufferen for første gang, men det må ha skriveadgang til katalogen du er
kommer til å lagre den i.
element som $ element) $ search_term = strtolower (trim ($ item-> title)); // trim () brukes til å fjerne hvite rom. hvis (! in_array ($ search_term, $ data)) // sikre at det ikke er duplikater. $ data [] = $ search_term; // legg til $ search_term til datarray. sorter ($ data); // alfabetisere oppsettet // Format dataene for JavaScript-utgang. foreach ($ data som $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Oppsett cachen $ fp = fopen ($ cache_path, "w"); // Opprett JavaScript-arrayet $ js_array = "var searchdata = [". implodere ($ js_data, ","). "];"; // Skriv arrayet til cache fwrite ($ fp, $ js_array); // Lukk cachen fclose ($ fp); // Inkluder cachefilen. inkluderer ($ cache_path); ?>
