FoxyComplete – erweiterte automatische Vervollständigungssuche mit Bildern

Heute werde ich eine trendige Funktionalität vorstellen, die ich schon seit einiger Zeit in meinen Projekten implementiere. I nenne es „FoxyComplete“ Und was es tut, ist, anklickbare Suchergebnisse zusammen mit Bildern abzurufen, die entweder automatisch aus dem Inhalt des Ergebnisses oder aus einer bestimmten Datei extrahiert wurden. Es ist einfach zu implementieren und sobald es fertig ist, leicht zu optimieren. Die Anwendung dieser Funktionalität hängt ausschließlich von den Vorlieben des Designers und Entwicklers ab, aber ihre Auswirkung auf die Benutzererfahrung macht sie zur ersten Wahl für die Ergänzung in modernen Design- und Entwicklungsprojekten. Geschäftsbereiche, in denen ich diese Funktionalität persönlich genutzt habe, sind E-Commerce, Corporate Designs, Fotografie, Entertainment und zukünftige Projekte, die eine umfassende Suchfunktion erfordern. Ich bin mir ziemlich sicher, dass Sie alle das besucht haben IMDb Und Apfel Websites und probierte deren Suchfunktionen aus. Wenn nicht, finden Sie unten eine Vorschau der erweiterten Suchfunktion.

Wir alle wissen, dass es machbar ist, aber dann stellt sich die Frage: „Warum wird das normalerweise nicht auf all diesen wunderschön gestalteten Websites durchgeführt?“ Nun ja, ich schätze, es liegt wahrscheinlich daran, dass es keine schnelle, für alle offene Lösung gibt! Als ich das Gleiche umgesetzt habe Automatische Vervollständigung der Suche mit Bildern drüben bei mir Fotografie-Blog Das, was ich vor einiger Zeit entworfen habe, war sicherlich schwierig umzusetzen, aber am Ende ist es großartig geworden. Den Besuchern meines Blogs macht das Stöbern in meiner Bildergalerie großen Spaß und sie bekommen sofort einen Vorgeschmack auf das, was sie als nächstes sehen werden. Nachfolgend erfahren Sie, wie die Suchfunktion in meinem Blog sieht aus.

In diesem Tutorial werde ich die unten genannten Punkte behandeln

  1. Ein kurzer Überblick über das Drehbuch
  2. FoxyComplete als WordPress-Plugin (lokal / dynamisch)
  3. Implementierung von FoxyComplete als Youtube-Suche mit Bildern
  4. Verbesserung der Sicherheit

Für WordPress-Designeres ist ein Kinderspiel und für die WordPress/PHP-Entwickler – Es ist eine großartige Gelegenheit, die zahlreichen Funktionen und Anwendungen zu erkunden, die es zu bieten hat. Für eine fortgeschrittene Implementierung wären Grundkenntnisse in WordPress, PHP, HTML, jQuery und CSS erforderlich.

Ein kurzer Überblick über das Drehbuch

Werfen wir zunächst einen kurzen Blick auf das, was wir in diesem Tutorial erstellen werden. Klicken Sie bitte auf das Bild unten, um eine zu erhalten grundlegende Demo.

Lesen:  DreamHost expandiert: Ankündigung des AWS Dubai Data Ce...

Bitte bedenken Sie, dass ich dieses Tutorial auf einem sehr einfachen Niveau halte, um sicherzustellen, dass es jeder versteht und jeder es entsprechend seinen Anforderungen entwerfen oder optimieren kann. Die Funktionalität, die ich geschaffen habe, wurde von der inspiriert jQuery Autocomplete-Plugin von Jörn Zaefferer. Das obige kurze Beispiel vervollständigt den Titel des Ergebnisses automatisch, wir können es aber auch anpassen, um bei der Auswahl zu einer URL umzuleiten (wird im nächsten Abschnitt erledigt). Die ID des Suchfelds wird beibehalten als “S”, Dies ist die Standardeinstellung für das WordPress-Suchfeld (wäre von Vorteil, wenn wir dieses Konzept weiterführen, um ein WordPress-Plugin zu entwickeln). Die Gestaltung der Ergebnisse ist einfach: Sie besteht aus einer sauberen Struktur, die sich leicht an Ihr Design anpassen lässt. .ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img und .ac_results ul li a span

In diesem einfachen Beispiel wird eine statische Datenquelle verwendet, bei der es sich um eine einfache JavaScript-Datei handelt, in der wir ein Array im JSON-Format deklariert haben. Unsere einzige Funktionalität besteht darin, das Array zu analysieren und die Ergebnisse anzuzeigen. Keine Sorge – es ist nur ein Array mit Basic Schlüssel- und Wertpaare und nichts weiter als das. Unsere Schlüssel sind die Permalink um uns zur Ergebnisseite zu bringen, Bild zur Vorschau und die Titel in dem wir die Zeichenfolge suchen müssen. Ich habe ein Standardbild und einen Beispieltitel für diese Basisdemo beibehalten.

Beispiel einer Array-Struktur

[
{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },
{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },
{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }
… Repeat as much as you want to
]

Die JavaScript-Funktionalität ist einfach. Wir analysieren einfach das resultierende JSON-Array in jQuery, formatieren die Ergebnisse gemäß unseren Anforderungen und übergeben es zur Anzeige.

Tipp für die Entwickler: Falls Sie die Anzeige der Ergebnisse ändern möchten, schauen Sie sich die an Funktionsformat() im Drehbuch foxycomplete.js. Es handelt sich um eine JavaScript-Funktion, die ein Array als Eingabe verwendet und formatiertes HTML zurückgibt, das die Elemente des Arrays enthält. Ziemlich einfach zu verstehen, aber wenn Sie es ändern möchten, tun Sie es hier!

FoxyComplete als WordPress-Plugin (lokal/dynamisch)

Klicken Sie auf das Bild unten, um das WordPress-Plugin als ZIP-Datei herunterzuladen.

Für die Designer

Ich hoffe, Sie erinnern sich daran, dass ich gesagt habe, dass es für Designer ein Kinderspiel sein sollte, nun, hier ist es! FoxyComplete als Plug-n-Play-WordPress-Plugin Das funktioniert sofort nach dem Auspacken – für die grundlegende Implementierung ist lediglich eine einfache Konfiguration erforderlich. Alles, was Sie tun müssen, ist, es herunterzuladen, zu installieren und herumzuspielen, während Sie dafür entwerfen. Der Plugin-Optionen sind wie folgt:

Lesen:  So richten Sie mit wpForo ein beeindruckendes Forum in WordPress ein

Lokale Suche aktivieren: Nachdem ich einige Websites durchsucht hatte, stellte ich fest, dass ihre Suchoption unglaublich schnell war – selbst bei einer riesigen Datenbank – Beispiel IMDB. Das erste, was auffiel, waren die fortschrittlichen, schnellen Server – aber was ist mit den regulären Benutzern, die Shared Hosting und unterschiedliche Datenmengen nutzen? Aus diesem Grund habe ich die lokale Suche zu einer vorrangigen Option gemacht. Es lädt einfach eine JavaScript-Datei in die Fußzeile Ihrer WordPress-Installation, die ein Array aller Ihrer Beiträge und Seiten sowie deren URLs und, falls vorhanden, Bildvorschauen enthält. Das Plugin ist standardmäßig auf die dynamische Suche eingestellt, Sie können es jedoch jederzeit auf die lokale Suche umstellen.

Grenze: Man bräuchte sicher eine Kontrolle über die Grenze der angezeigten Ergebnisse. Es trägt dazu bei, die Konsistenz des Designs zu wahren und ermöglicht es Benutzern, nur die relevantesten Ergebnisse zu erhalten. Standardmäßig werden fünf relevanteste Ergebnisse angezeigt.

Breite der Autovervollständigung: Ursprünglich wurde immer die Breite der Eingabe beibehalten, aber dann wurde mir klar, dass wir nicht in einem breiten Suchfeld im Google-Stil suchten. Standardmäßig wird weiterhin die Breite des Eingabeelements verwendet, Sie können diese jedoch jederzeit ändern.

ID der Eingabe: Da es sich um ein WordPress-Plugin handelt, habe ich dem den Vorzug gegeben “#S” als Standardauswahl, die nach Ihren Wünschen geändert werden kann. Geben Sie einfach die ID (ohne das „#“) Ihres gewünschten Eingabeelements ein und schon kann es losgehen.

Standardbild: Manchmal findet das Plugin möglicherweise kein relevantes Bild und dafür habe ich ein Demobild eingefügt, aber auch darüber haben Sie die Kontrolle: Ersetzen Sie es einfach durch Ihr eigenes Beispielbild im Plugin-Verzeichnis. Die dynamische Suche sucht intelligent nach relevanten Inhalten und stellt der Funktionalität sofort ein dynamisches JSON-Array zur Verfügung. Zunächst werden alle veröffentlichten und öffentlichen Beiträge und Seiten in der WordPress-Installation gesammelt. Dann es durchsucht die Bilder in 3 Schritten aus dem Inhalt als:

  1. Medien-Uploads
  2. Benutzerdefiniertes Feld „Miniaturansicht“.
  3. Bilder im Beitragsinhalt

Sobald alle Daten vorliegen, kombiniert es den Titel und den jeweiligen Inhalt jedes Beitrags/jeder Seite und sucht nach dem abgefragten Artikel für ein umfassendes Sucherlebnis. Sobald sie gefunden wurden, sagen wir, dass X Elemente vorhanden sind, werden diese X in ein JSON-Array übertragen, das an die JavaScript-Funktionalität zurückgegeben wird.

Lesen:  Warum sollten Sie Ihr Projekt mit der Entdeckungsphase beginnen?

Dynamische vs. lokale Funktionalität

Dies ist ein kritisches Thema und ich bin offen für eine Diskussion im Kommentarbereich. Ich persönlich bin der Meinung, dass es nicht schaden kann, ihnen eine lokale Quelle zu geben, wenn dies das Erlebnis um ein Vielfaches verbessert. Ein weiterer Grund, warum ich die lokale Suche implementiert habe, war, dass ich festgestellt habe, dass sogar Google sie in Gmail implementiert hat.

Sobald sich der Benutzer anmeldet, sendet Gmail eine Anfrage an seinen Server und ruft alle E-Mail-Adressen und Namen oder Aliase aller Ihrer Kontakte in der Fußzeile ab, die dann für die Autovervollständigungsfelder „An“, „CC“, „BCC“ und „Labels“ verwendet werden. Was sagen Sie, legitim?

Implementierung von FoxyComplete als YouTube-ähnliche Suche mit Bildern

Wie oben erwähnt, gibt es auch für Entwickler viele Funktionen. Oben haben wir YouTube-Feeds verwendet und sie dann in PHP analysiert, um die erforderlichen Ergebnisse im JSON-Format zu erhalten. Darüber können Sie mehr erfahren Hier. Klicken Sie auf das Bild unten, um eine Demo der YouTube Foxycomplete-Suche anzuzeigen.

Eine weitere Funktionalität, die Sie erstellen können, ist die YouTube-Suchmaschine mit On-Click-Wiedergabe im Modal- oder Overlay-Modus. Wenn Sie beispielsweise nach einem Video suchen und in den Ergebnissen der automatischen Vervollständigung darauf klicken, wird ein modales Dialogfeld oder eine Überlagerung mit dem darin enthaltenen Video geöffnet, das auf Ihrer Website abgespielt wird, aber von YouTube stammt. Schön, nicht wahr?

Verbesserung der Sicherheit

Obwohl das WordPress-Plugin so sicher ist, wie ich es verwendet habe WordPress-Ankündigungen, es kann sogar sicherer gemacht werden, indem Konstanten in der dynamischen Version und Verschlüsselung in der lokalen verwendet werden. Eine von uns verwendete Sicherheitsmaßnahme bestand darin, nach einem Ajax-Aufruf zu suchen und dann auch nach einem Ajax-Aufruf von derselben Domäne zu suchen, wie unten gezeigt. //definiere SAME_DOMAIN im Header deines Dokuments auf „true“. define(‘IS_AJAX’, isset($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’); define(‘DOING_AJAX’, true); if(IS_AJAX && DOING_AJAX && SAME_DOMAIN) { //Ihre Suchlogik } Das ist nur eine von zahlreichen Möglichkeiten, es zu sichern!

Abschluss

Das war es also FoxyComplete Das könnte Ihnen in Zukunft bei Ihren Design- und Entwicklungsprojekten sehr helfen. Dies ist Version 1.0 und ich werde sie mit Ihrem wertvollen Feedback und Ihrer Unterstützung weiter verbessern. Lassen Sie mich im Kommentarbereich unten wissen, was Sie denken. Da dies in einer Umgebung gehostet wird, die ich mit Ihren tollen Vorschlägen einfach und regelmäßig bearbeiten kann, können wir es zu einem großartigen kostenlosen Plugin mit ultimativer Benutzererfahrung auf beiden Seiten machen.

Aktuelle Artikel:

Empfohlen