Share
Denna handledning visar dig hur du använder "Populära sökfrågor" -matningen från din Google Custom Search Engine (CSE) som en datakälla för en autokomplettering av jQuery.
Med Googles anpassade sökmotor (CSE) kan du skapa en robust sökfunktion för din webbplats. De erbjuder en gratis,
Ad-supported version och en premium affärsversion som börjar på $ 100 per år. Dessutom tillhandahåller CSE ett brett spektrum av mätvärden, allt från integration med
Google Analytics till ett flöde av populära sökfrågor.
Denna handledning visar dig hur du använder PHP och jQuery för att lägga till en automatisk komplett funktion till CSE: s standardsökningsfält med de populära sökfrågor som matar som datakälla.
För att framgångsrikt kunna använda denna teknik på din webbplats behöver du din egen Google CSE och en anständig mängd söktrafik (för att vi ska ha en bra uppsättning data för
vår automatiska lista).
Oroa dig inte om du inte uppfyller alla dessa krav - du kan fortfarande följa med. Google citerar ofta MacWorlds CSE-implementering
som exempel, så använder jag deras sökmata i denna handledning. Gärna göra detsamma om du vill.
Låt oss börja.
Det första vi gör är att lägga till CSE: s standardsökskod på en ny XHTML-sida. Du kan hitta detta genom att logga in på kontrollpanelen och klicka på "kod". Det kommer
se något så här.
Spara det här dokumentet i en ny mapp som search.html och öppna den i webbläsaren. Leta efter något för att se till att sökrutan fungerar.
Även om jQuery-användargränssnittet har en automatisk komplett funktion inbyggd, kan du hitta
Automatisk komplett plugin skapad av Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar och Jörn Zaefferer är lite lättare att använda. Ladda ner
jquery.autocomplete.zip och pakka ut det.
Plugins arkiv innehåller en mängd olika skript för många implementeringar. Medan den bästa praxisen skulle vara att flytta skript och stilark vi är
kommer att använda till lämpligt namngivna mappar inuti sidens rot, för enkelhets skull, låt oss bara dra
"jquery-autocomplete" -mappen i mappen vår search.html finns i.
Pluggen levereras med en demo som illustrerar hur den automatiska komplett kan användas med stadens namn. Låt oss se till att jQuery och vårt plugin fungerar korrekt
genom att koppla ihop Google-sökrutan upp till listan över städer. I search.html, lägg till följande inuti
Vi behöver också ändra CSE: s standardsökskod genom att lägga till ett id-attribut i sökrutan. Vi kallar det "cse_search."
Spara search.html och öppna den i webbläsaren. I sökrutan börjar du skriva namnet på en stad; Du ska se autofullständig meny.
I det föregående steget inkluderade vi skriptet "jquery-autocomplete / demo / localdata.js". Om du öppnar filen och tittar på den ser du några olika
JavaScript-arrays. Det här är de arrays som används för att fylla i automatiska kompletta listor i plugins demofiler. När vi initialiserade jQuery och instruerade plugin
för att automatiskt slutföra vår "cse_search" -ruta, berättade vi också att den skulle få sina data från städerna:
Accentsconagua
$ (). redo (funktion () $ ("# cse_search"). autofullständig (städer);); Nu måste vi instruera jQuery att använda våra populära frågor mata som datakälla. Men hur?
Vi använder lite PHP för att dra in de populära frågorna, mata, analysera det och echo ett giltigt JavaScript-system. Genom att inkludera PHP-filen som vi skulle
en vanlig JavaScript-fil, kommer den att utföras bakom kulisserna och webbläsaren tror att det läser en statisk JS-fil.
Dessutom ska vi komplettera våra populära frågor med de villkor vi anger. Villkoren som vi anger här kanske inte sökes ofta
tillräckligt för att dyka upp som en "populär fråga" men de kan fortfarande vara användbara att ha i vår kompletta lista. Till exempel villkor som du har skapat
Google prenumererade länkar eller termer som tjäna pengar med
AdSense for Search.
Skapa en fil i mappen "jquery-autocomplete" som heter searchdata.php och klistra in i följande:
objekt som $ item) $ search_term = strtolower (trim ($ item-> title)); // trim () används för att ta bort whitespaces. om (! in_array ($ search_term, $ data)) // kontrollera att det inte finns några duplikat. $ data [] = $ search_term; // lägg till $ search_term till data array. sortera ($ data); // alfabetisera matrisen // Formatera data för JavaScript-utmatning. foreach ($ data som $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Låt oss informera webbläsaren om att vi skickar JavaScript. rubrik ("Innehållstyp: text / javascript \ n \ n"); // Nästa kommer vi att fly från PHP och skapa en JavaScript-array. Inuti matrisen återgår vi till // PHP och använder implode () för att returnera en kommaseparerad sträng av all data inuti $ js_data. ?> var searchdata = []; 
Om du använder ditt eget CSE-flöde, vill du ersätta webbadressen på rad 7. I det här exemplet brukade jag använda de övergripande populära frågorna för MacWorld.com.
Du kan använda dina egna allmänna populära frågor genom att gå till din CSE Hantera sida> Statistik>
Övergripande. Andra tillgängliga alternativ är populära sökningsfeeds dag, vecka och månad.
Därefter måste vi ta bort demoens localdata.js-skript från search.html och ersätta det med vår searchdata.php-fil:
Byta ut: Med:
Vi behöver också ändra vår initialiseringskod något:
Ersätt: $ ("# cse_search"). Autofullständig (städer); Med: $ ("# cse_search"). Autofullständig (sökdata); Låt oss nu ladda upp allt till servern och ge search.html ett skott. Om allt fungerar som det ska, slutar din bil
ska fungera perfekt.
Webbplatser som får en betydande mängd trafik kanske vill överväga att cachelagra sökrutan. När servern har analyserat matningen
varje gång någon skriver in i sökrutan kommer en betydande mängd resurser att användas. Du kan cache resultaten genom att ersätta din
searchdata.php-filen med följande:
Notera: Skriptet skapar cacheminnet för första gången, men det måste ha skrivåtkomst till katalogen du är
kommer att lagra den i.
objekt som $ item) $ search_term = strtolower (trim ($ item-> title)); // trim () används för att ta bort whitespaces. om (! in_array ($ search_term, $ data)) // kontrollera att det inte finns några duplikat. $ data [] = $ search_term; // lägg till $ search_term till data array. sortera ($ data); // alfabetisera matrisen // Formatera data för JavaScript-utmatning. foreach ($ data som $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Ställ in cachen $ fp = fopen ($ cache_path, "w"); // Skapa JavaScript-arrayen $ js_array = "var searchdata = [". implodera ($ js_data, ","). "];"; // Skriv arrayen till cache fwrite ($ fp, $ js_array); // Stäng cachen fclose ($ fp); // Inkludera cachefilen. innefattar ($ cache_path); ?>
