Share
In diesem Lernprogramm erfahren Sie, wie Sie den Feed "Beliebte Abfragen" aus Ihrer benutzerdefinierten Suchmaschine (CSE) als Datenquelle für eine jQuery-Autovervollständigung verwenden.
Mit der Custom Search Engine (CSE) von Google können Sie eine robuste Suchfunktion für Ihre Website erstellen. Sie bieten eine kostenlose,
werbefinanzierte Version und eine Premium-Businessversion, die bei 100 US-Dollar pro Jahr beginnt. Darüber hinaus bietet CSE eine breite Palette von Metriken, die von der Integration mit reichen
Google Analytics zu einem Feed mit gängigen Suchanfragen.
In diesem Lernprogramm erfahren Sie, wie Sie PHP und jQuery verwenden, um dem Standardsuchfeld von CSE eine automatische Vervollständigungsfunktion hinzuzufügen, die den populären Suchabfragen-Feed als Datenquelle verwendet.
Um diese Technik erfolgreich auf Ihrer Website einsetzen zu können, benötigen Sie eine eigene Google CSE und einen anständigen Suchverkehr (um sicherzustellen, dass wir über gute Daten verfügen
unsere automatische Vervollständigungsliste).
Machen Sie sich keine Sorgen, wenn Sie nicht alle diese Anforderungen erfüllen - Sie können trotzdem mitverfolgen. Google zitiert häufig die CSE-Implementierung von MacWorld
Als Beispiel verwende ich ihren Such-Feed in diesem Tutorial. Fühlen Sie sich frei, das gleiche zu tun, wenn Sie möchten.
Lass uns anfangen.
Als erstes fügen wir den Standardsuchcode der CSE zu einer neuen XHTML-Seite hinzu. Sie finden das, indem Sie sich in Ihrem Control Panel anmelden und auf "Code" klicken. Es wird
so etwas aussehen.
Speichern Sie dieses Dokument in einem neuen Ordner als search.html und öffnen Sie es in Ihrem Browser. Suchen Sie nach etwas, um sicherzustellen, dass das Suchfeld funktioniert.
Obwohl die jQuery-Benutzeroberfläche über eine Funktion zum automatischen Ausfüllen verfügt, finden Sie möglicherweise die
Das von Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar und Jörn Zaefferer erstellte automatische Vervollständigungs-Plugin ist etwas einfacher zu bedienen. Herunterladen
jquery.autocomplete.zip und entpacken Sie es.
Das Archiv des Plugins enthält eine Vielzahl verschiedener Skripte für viele Implementierungen. Die beste Vorgehensweise wäre, die Scripts und Stylesheets zu verschieben
Um die Ordner mit den entsprechenden Namen zu benennen, ziehen Sie einfach die
"jquery-autocomplete" Ordner in den Ordner, in dem sich unsere search.html befindet.
Das Plugin wird mit einer Demo geliefert, die zeigt, wie die automatische Vervollständigung mit Städtenamen verwendet werden kann. Stellen Sie sicher, dass jQuery und unser Plugin ordnungsgemäß funktionieren
indem Sie unser Google-Suchfeld mit der Liste der Städte verbinden. Fügen Sie in search.html Folgendes in das Feld
Wir müssen auch den Standardsuchcode von CSE geringfügig ändern, indem Sie dem Suchfeld ein id-Attribut hinzufügen. Wir nennen es "cse_search".
Speichern Sie search.html und öffnen Sie es in Ihrem Browser. Geben Sie im Suchfeld den Namen einer Stadt ein. Sie sollten das Autocomplete-Menü sehen.
Im vorherigen Schritt haben wir das Skript "jquery-autocomplete / demo / localdata.js" eingefügt. Wenn Sie die Datei öffnen und betrachten, werden einige davon angezeigt
JavaScript-Arrays. Dies sind die Arrays, die verwendet werden, um automatisch vollständige Listen in den Demo-Dateien des Plugins aufzufüllen. Wenn wir jQuery initialisiert und das Plugin angewiesen haben
Um das Feld "cse_search" automatisch zu vervollständigen, haben wir auch gesagt, dass es seine Daten aus dem Cities-Array erhalten soll:
Accentsconagua
$ (). ready (function () $ ("# cse_search"). autocomplete (Städte);); Jetzt müssen wir jQuery anweisen, unseren populären Queries-Feed als Datenquelle zu verwenden. Aber wie?
Wir verwenden ein wenig PHP, um den populären Queries-Feed einzulesen, ihn zu analysieren und ein gültiges JavaScript-Array auszugeben. Indem wir die PHP-Datei so einfügen, wie wir es möchten
Dies ist eine normale JavaScript-Datei. Sie wird im Hintergrund ausgeführt und der Webbrowser wird der Ansicht, dass er eine statische JS-Datei liest.
Darüber hinaus ergänzen wir unseren beliebten Queries-Feed mit den von uns angegebenen Begriffen. Die hier angegebenen Begriffe werden möglicherweise nicht oft gesucht
genug, um als "beliebte Abfrage" angezeigt zu werden, aber sie können dennoch nützlich sein, um sie in unserer Auto-Complete-Liste zu haben. Zum Beispiel Begriffe, für die Sie erstellt haben
Google abonnierte Links oder Begriffe, die gut mit Geld verdienen
AdSense für die Suche.
Erstellen Sie im Ordner "jquery-autocomplete" eine Datei namens "searchdata.php" und fügen Sie Folgendes ein:
Artikel als $ item) $ search_term = strtolower (trim ($ item-> title)); // trim () wird zum Entfernen von Whitespaces verwendet. if (! in_array ($ search_term, $ data)) // Vergewissern Sie sich, dass keine Duplikate vorhanden sind. $ data [] = $ search_term; // $ search_term zum Datenarray hinzufügen. sort ($ data); // Alphabet das Array alphabetisieren // Die Daten für die JavaScript-Ausgabe formatieren. foreach ($ data als $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Informieren Sie den Browser, dass wir JavaScript senden. Header ("Inhaltstyp: Text / Javascript \ n \ n"); // Als Nächstes werden wir uns von PHP lösen und ein JavaScript-Array erstellen. Innerhalb des Arrays kehren wir zu // PHP zurück und verwenden implode (), um eine durch Kommas getrennte Zeichenfolge aller Daten in $ js_data zurückzugeben. ?> var searchdata = []; 
Wenn Sie Ihren eigenen CSE-Feed verwenden, müssen Sie die URL in Zeile 7 ersetzen. In diesem Beispiel habe ich den allgemein verbreiteten Abfragen-Feed für MacWorld.com verwendet.
Sie können Ihren eigenen allgemeinen Abfragen-Feed verwenden, indem Sie auf Ihre CSE-Verwaltungsseite> Statistiken> gehen
Insgesamt. Andere verfügbare Optionen sind beliebte Abfrage-Feeds nach Tag, Woche und Monat.
Als Nächstes müssen wir das localdata.js-Skript des Demos aus search.html entfernen und durch unsere searchdata.php-Datei ersetzen:
Ersetzen: Mit:
Wir müssen auch unseren Initialisierungscode leicht ändern:
Ersetzen Sie: $ ("# cse_search"). Autovervollständigung (Städte); Mit: $ ("# cse_search"). Autocomplete (searchdata); Lassen Sie uns nun alles auf den Server hochladen und search.html einen Schuss geben. Wenn alles so funktioniert, wie es soll, wird Ihr Auto automatisch abgeschlossen
sollte perfekt funktionieren.
Websites, die einen erheblichen Datenverkehr erhalten, möchten möglicherweise das Zwischenspeichern des Sucharrays in Betracht ziehen. Nachdem der Server den Feed analysiert hat
Jedes Mal, wenn jemand in das Suchfeld eingibt, werden erhebliche Ressourcen benötigt. Sie können die Ergebnisse zwischenspeichern, indem Sie Ihr ersetzen
searchdata.php-Datei mit folgendem Inhalt:
Hinweis: Das Skript erstellt den Cache zum ersten Mal, muss jedoch Schreibzugriff auf das Verzeichnis haben, in dem Sie sich befinden
werde es in einlagern.
Artikel als $ item) $ search_term = strtolower (trim ($ item-> title)); // trim () wird zum Entfernen von Whitespaces verwendet. if (! in_array ($ search_term, $ data)) // Vergewissern Sie sich, dass keine Duplikate vorhanden sind. $ data [] = $ search_term; // $ search_term zum Datenarray hinzufügen. sort ($ data); // Alphabet das Array alphabetisieren // Die Daten für die JavaScript-Ausgabe formatieren. foreach ($ data als $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Den Cache einrichten $ fp = fopen ($ cache_path, "w"); // Erzeuge das JavaScript-Array $ js_array = "var searchdata = [". implode ($ js_data, ","). "];"; // Schreibe das Array in den Cache fwrite ($ fp, $ js_array); // Den Cache schließen fclose ($ fp); // Include die Cache-Datei. include ($ cache_path); ?>
