Leitfaden / Artikel

So fügen Sie eine Live-Suche auf der Webflow-Seite hinzu

Aviv
Januar 28, 2021
So fügen Sie eine Live-Suche auf der Webflow-Seite hinzu

Das Hideseek-Plugin ist sehr leicht und einfach zu bedienen. Es ist genau das, was Ihre Seite freundlicher machen kann und den Benutzern hilft, schneller zu finden, was sie wollen.

Der erste Schritt ist die Erstellung unserer Hierarchie/Struktur in der Seite. Dafür brauchen wir:

  1. Suchleiste (Eingabeblock)
  2. Container zum Suchen in

Die Suchleiste kann manuell mit Code in einem HTML-Einbettwidget hinzugefügt werden, oder Sie verwenden einen Formularblock und löschen alle anderen Felder und Schaltflächen (lassen Sie nur ein Eingabefeld frei). Fügen Sie in beiden Fällen eine ID in die Suchleiste ein.

Der Container sollte einen Classname oder eine ID haben.

2. Schritt: Fügen Sie die Quelle des Plugin-Skripts (ich verwende CDN, Sie können es von hier herunterladen und auf Ihren Server hochladen) vor dem Tag ein.

Der letzte Schritt ist die Initiierung des Plugins mit einigen Konfigurationen.

Das '#search' ist die ID der Suchleiste. So weiß das Plugin, dass es den Container durchsuchen soll, wenn wir diese spezielle Suchleiste eingeben. Das '.wrapping-div' ist der Klassenname des Containers, in dem gesucht werden soll.

nodata' ist ein SEHR EINFACHER leerer Zustand. Nur Text, der durch Anvisieren des Klassennamens '.no-results' gestylt werden kann. highlight: true' hebt den Suchbegriff in den Ergebnissen hervor (kann auch durch Anvisieren des Klassennamens '.highlight' gestaltet werden).


$(document).ready(function() {
  $('#search').hideseek({
    list: '.wrapping-div',
    nodata: 'Ooops... Nothing here...',
    highlight: true,
  });
})

Aviv
Januar 28, 2021

Empfangen Sie Webflow-Ressourcen direkt in Ihre Mailbox.

Melden Sie sich an, um wöchentliche Einblicke und Inspirationen in Ihrem Posteingang zu erhalten.

ANDERE ANLEITUNGEN & LEKTIONEN

Steigern Sie Ihre Webflow-Site weiter.