Share
In deze zelfstudie wordt uitgelegd hoe u de feed 'Populaire zoekopdrachten' van uw Google Custom Search Engine (CSE) als gegevensbron voor een automatische aanvulling van jQuery gebruikt.
Met Google Custom Search Engine (CSE) kunt u een robuuste zoekfunctie voor uw website maken. Ze bieden een gratis,
advertentie-ondersteunde versie en een premium zakelijke versie die begint bij $ 100 per jaar. Bovendien biedt CSE een breed scala aan statistieken, variërend van integratie met
Google Analytics voor een feed met populaire zoekopdrachten.
Deze tutorial laat je zien hoe je PHP en jQuery gebruikt om een functie voor automatisch aanvullen toe te voegen aan het standaardzoekvak van CSE met behulp van de populaire feed voor zoekopdrachten als de gegevensbron.
Als u deze techniek met succes op uw site wilt gebruiken, heeft u uw eigen Google CSE en een behoorlijke hoeveelheid zoekverkeer nodig (om ervoor te zorgen dat we een mooie set gegevens hebben voor
onze auto complete lijst).
Maak je geen zorgen als je niet aan al deze vereisten voldoet - je kunt nog steeds meegaan. Google haalt vaak de CSE-implementatie van MacWorld aan
als voorbeeld, dus ik gebruik hun zoekfeed in deze zelfstudie. Voel je vrij om hetzelfde te doen als je wilt.
Laten we beginnen.
Het eerste wat we zullen doen is de standaard zoekcode van CSE toevoegen aan een nieuwe XHTML-pagina. U kunt dit vinden door u aan te melden bij uw configuratiescherm en op 'code' te klikken. Het zal
er ongeveer zo uitzien.
Sla dit document op als search.html in een nieuwe map en open het in uw browser. Zoek naar iets om ervoor te zorgen dat het zoekvak werkt.
Hoewel in de jQuery-gebruikersinterface een functie voor automatisch voltooien is ingebouwd, vindt u mogelijk de
auto complete plugin gemaakt door Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar en Jörn Zaefferer is een beetje gemakkelijker in gebruik. Download
jquery.autocomplete.zip en unzip het.
Het archief van de plug-in bevat een verscheidenheid aan verschillende scripts voor vele implementaties. Hoewel het de beste methode is om de scripts en stylesheets die we zijn te verplaatsen
gaan gebruiken om mappen met de juiste naam binnen de hoofdmap van onze pagina te plaatsen, in het belang van de eenvoud, laten we gewoon het
"jquery-autocomplete" -map in de map waarin onze search.html zich bevindt.
De plug-in wordt geleverd met een demo die illustreert hoe het automatisch aanvullen kan worden gebruikt met plaatsnamen. Laten we ervoor zorgen dat jQuery en onze plug-in correct werken
door ons Google-zoekvak aan de lijst met steden te koppelen. Voeg in search.html het volgende toe binnen de
We moeten ook de standaardzoekcode van CSE enigszins aanpassen door een ID-kenmerk aan het zoekvak toe te voegen. We zullen het 'cse_search' noemen.
Sla search.html op en open het in uw browser. Vink in het zoekvak de naam van een stad in; je zou het autocomplete-menu moeten zien.
In de vorige stap hebben we het script "jquery-autocomplete / demo / localdata.js" toegevoegd. Als u het bestand opent en ernaar kijkt, ziet u er een paar anders
JavaScript-arrays. Dit zijn de arrays die worden gebruikt om automatisch complete lijsten in de demobestanden van de plug-in te vullen. Wanneer we jQuery hebben geïnitialiseerd en de plug-in hebben geïnstrueerd
om ons "cse_search" -vak automatisch in te vullen, hebben we ook gezegd dat het zijn gegevens uit de steden-array moet ophalen:
Accentsconagua
$ (). ready (function () $ ("# cse_search"). autocomplete (steden);); Nu moeten we jQuery opdracht geven onze feed met populaire zoekopdrachten te gebruiken als gegevensbron. Maar hoe?
We gebruiken een beetje PHP om de feed voor populaire zoekopdrachten in te voeren, te parseren en een geldige JavaScript-array te laten zien. Door het PHP-bestand op te nemen zoals we dat zouden doen
een standaard JavaScript-bestand, het zal achter de schermen worden uitgevoerd en de webbrowser zal denken dat het een statisch JS-bestand aan het lezen is.
Daarnaast vullen we onze populaire zoekopdrachten ook aan met termen die we opgeven. De termen die we hier specificeren, worden mogelijk niet vaak gezocht
genoeg om te verschijnen als een 'populaire zoekopdracht', maar ze kunnen nog steeds nuttig zijn om in onze automatische lijst te hebben. Bijvoorbeeld termen waarvoor u heeft gemaakt
Door Google geabonneerde links of termen waarmee u goed inkomsten genereert
AdSense voor zoeken.
Maak een bestand in de map "jquery-autocomplete" met de naam searchdata.php en plak het volgende in:
item als $ item) $ search_term = strtolower (trim ($ item-> title)); // trim () wordt gebruikt om spaties te verwijderen. if (! in_array ($ search_term, $ data)) // zorg dat er geen duplicaten zijn. $ data [] = $ search_term; // voeg $ search_term toe aan data-array. sorteren ($ gegevens); // alfabetiseer de array // Formatteer de gegevens voor JavaScript-uitvoer. foreach ($ data as $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Laten we de browser laten weten dat we JavaScript verzenden. header ("Inhoudstype: tekst / javascript \ n \ n"); // We zullen nu ontsnappen aan PHP en een JavaScript-array maken. Binnen de array keren we terug naar // PHP en gebruiken we implode () om een door komma's gescheiden reeks van alle gegevens in $ js_data te retourneren. ?> var searchdata = []; 
Als u uw eigen CSE-feed gebruikt, moet u de URL op regel 7 vervangen. In dit voorbeeld heb ik de algemene feed voor populaire zoekopdrachten voor MacWorld.com gebruikt.
U kunt uw eigen algemene feed voor populaire zoekopdrachten gebruiken door naar uw CSE-beheerspagina> Statistieken> te gaan
Over het algemeen. Andere beschikbare opties zijn populaire queryfeeds per dag, week en maand.
Vervolgens moeten we het script localdata.js van de demo verwijderen uit search.html en dit vervangen door ons bestand searchdata.php:
Vervangen: Met:
We moeten ook onze initialisatiecode enigszins aanpassen:
Vervang: $ ("# cse_search") .autocomplete (steden); Met: $ ("# cse_search"). Autocomplete (zoekgegevens); Laten we nu alles naar de server uploaden en search.html een foto geven. Als alles werkt zoals het hoort, wordt uw auto voltooid
zou perfect moeten werken.
Sites die een aanzienlijke hoeveelheid verkeer ontvangen, kunnen overwegen de zoekarray in cache te plaatsen. Nadat de server de feed heeft geparseerd
elke keer dat iemand in het zoekvak typt, wordt een aanzienlijke hoeveelheid resources gebruikt. U kunt de resultaten in de cache opslaan door uw account te vervangen
searchdata.php bestand met het volgende:
Notitie: Het script maakt de cache voor de eerste keer, maar het moet schrijftoegang hebben tot de map die u bent
gaan opslaan in.
item als $ item) $ search_term = strtolower (trim ($ item-> title)); // trim () wordt gebruikt om spaties te verwijderen. if (! in_array ($ search_term, $ data)) // zorg dat er geen duplicaten zijn. $ data [] = $ search_term; // voeg $ search_term toe aan data-array. sorteren ($ gegevens); // alfabetiseer de array // Formatteer de gegevens voor JavaScript-uitvoer. foreach ($ data as $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Stel de cache in $ fp = fopen ($ cache_path, "w"); // Maak de JavaScript-array $ js_array = "var searchdata = [". imploderen ($ js_data, ","). "];" // Schrijf de array naar de cache fwrite ($ fp, $ js_array); // Sluit de cache fclose ($ fp); // Neem het cachebestand op. include ($ cache_path); ?>
