holmes

Schnelle und einfache Suche innerhalb einer Seite.

Holmes filtert eine Liste von Elementen basierend auf dem Wert einer input in nur ca. 2 KB.

Installation

Sie können Holmes entweder mit npm oder bower unter dem Paketnamen holmes.js installieren. Für npm sieht das so aus:

$ yarn add holmes.js # or via npm

Anschließend können Sie es Ihrer Seite hinzufügen, z. B. mit Webpack, Rollup, Browserify oder indem Sie das Modul in ein anderes Skript-Tag laden.

Sie müssen sicherstellen, dass Sie eine css Regel für die Klasse .hidden haben, die Elemente nach Ihren Wünschen verbirgt. Eine Möglichkeit besteht darin, Folgendes zu haben:

. hidden {
  display : none;
}

aber das könnte jedes beliebige css sein, das Sie wollen.

Verwendung

Demo

Wann sollte ich es verwenden?

Sie sollten Holmes verwenden, wenn

• Sie haben eine begrenzte Anzahl an Artikeln
• Sie brauchen keine Tipptoleranz
• Sie möchten nur eine wirklich kleine Bibliothek hinzufügen
• Alle Elemente sind bereits auf der Seite sichtbar

In Fällen, in denen Ihre Erwartungen komplizierter sind, würde ich die Nutzung eines Dienstes wie Algolia empfehlen.

Faire Offenlegung: Ich arbeite derzeit bei Algolia. Scheint das interessant zu sein? Begleiten Sie uns!

Einfaches Beispiel

 holmes ( {
  input : '.search input' , // default: input[type=search]
  find : '.results div' // querySelectorAll that matches each of the results individually
} ) 

Optionen

vollständige Dokumentation

input

Standard : input[type=search]

querySelector für die Eingabe

Beispiele : input , .search input

find erforderlich

querySelectorAll für Elemente, in denen gesucht werden soll

Beispiele : blockquote p , .result , .results div

class

class.hidden

Standard : hidden

Klasse, die hinzugefügt werden soll, wenn eine .find die Suchabfrage nicht enthält.

Beispiele : hidden , dn , none

class.visible

Standard : false

Klasse, die zu sichtbaren Elementen hinzugefügt werden soll, wenn sie die Suchabfrage enthalten.

Beispiele : visible , vis , nohidden

placeholder

Standard : false

html, um anzuzeigen, wenn keine Ergebnisse vorliegen.

Beispiele : <p> No results </p> , Didn't find anything.

dynamic

Standard : false

Aktivieren Sie diese Option, wenn Sie möchten, dass Holmes bei jeder Eingabe den Wert von .find abfragt.

Beispiele : true , false

instant ️ VERALTET

Standard : false

Diese Option ist veraltet. Um Holmes in einer asynchronen Umgebung zu verwenden, initialisieren Sie es mit:

 holmes ( options ) . start ( ) ;
// or
const h = new holmes ( options ) ;
h . start ( ) ;

Auf diese Weise wird es sofort gestartet, genau wie früher mit instant: true . Entschuldigen Sie die Unannehmlichkeiten.

Standardmäßig wartet Holmes auf ein DOMContentLoaded -Ereignis, um mit der Suche zu beginnen. Wenn Sie die Elemente beispielsweise per AJAX laden, kommt dieses Ereignis zu früh. In diesem Fall können Sie instant aktivieren und Holmes starten, wenn Ihr Inhalt fertig ist.

Beispiele : true , false

minCharacters

Standard : 0

Es muss eine Mindestanzahl an Zeichen eingegeben werden, bevor Holmes mit dem Filtern beginnt.

Beispiele : 2 , 5

mark

Standard : false

Um das Ergebnis in einem <mark> -Tag innerhalb der .find anzuzeigen, sollten Sie dies aktivieren. Um die Farbe zu ändern, in der diese match angezeigt wird, sollten Sie die mark „Hintergrundfarbe“ formatieren.

❗ Dadurch werden Ereignis-Listener für verschachtelte Inhalte unterbrochen

❗ Dies funktioniert nicht, wenn das Zeichen nach der Übereinstimmung ein Literal > ist.

Wenn Sie dieses Zeichen wirklich verwenden müssen, können Sie alle Vorkommen von > durch >

Beispiele : true , false

hiddenAttr

Standard : true

Fügt hidden="true" zu versteckten Elementen hinzu. Interessanter Link, der seine Verwendung erklärt.

shouldShow

Die Standardübereinstimmungsbeurteilung ist eine teilweise Übereinstimmung des Eingabewerts.

 function ( htmlText , search ) {
  return htmlText . indexOf ( search ) !== - 1 ;
}

Eine benutzerdefinierte Matching-Funktion, die mit dem Text eines Elements als erstem Argument und dem aktuellen Eingabetext als zweitem Argument aufgerufen wird. Dies sollte true zurückgeben, wenn das Element angezeigt werden soll, und false, wenn es ausgeblendet werden muss.

 var customMatching = function ( htmlText , search ) {
  return search . split ( / s+ / ) . every ( function ( v , i ) {
    if ( htmlText . indexOf ( v ) === - 1 ) {
      return false ;
    }
    return true ;
  } ) ;
}
holmes ( {
  shouldShow : customMatching
} )

onHidden

Rückruf, wenn ein Element ausgeblendet ist.

 function ( el ) {
  console . log ( 'hide' , el ) ;
}

onVisible

Rückruf, wenn ein Element wieder sichtbar ist.

 function ( el ) {
  console . log ( 'show' , el ) ;
}

onEmpty

Rückruf, wenn keine Artikel gefunden wurden.

 function ( placeholder ) {
  console . log ( 'nothing found' , placeholder ) ;
}

onFound

Rückruf, wenn Elemente gefunden werden, nachdem sie leer waren.

 function ( placeholder ) {
  console . log ( 'something found' , placeholder ) ;
}

onInput

Rückruf für jede Eingabe.

 function ( input ) {
  console . log ( 'current input' , input ) ;
} 

Methoden und Mitglieder

Für alle Methoden sollten Sie eine neue Instanz von Holmes wie folgt initialisieren:

 var h = new holmes ( options ) ;

Dann können Sie die folgenden Methoden verwenden:

.clear()

Sie können eine Holmes-Eingabe programmgesteuert löschen, indem Sie Folgendes verwenden:

 h . clear ( ) ;

.count()

Sie können jederzeit Informationen darüber erhalten, welche Elemente sichtbar, ausgeblendet und insgesamt sind:

 h . count ( ) ; // {all: 41, hidden: 34, visible: 7}

.start()

Starten Sie einen geraden Listener für die angegebenen Optionen. Holmes lässt .start() bei der Initialisierung immer laufen.

 h . start ( ) ;

.stop()

Stoppt den aktuell laufenden Ereignis-Listener. Löst ein Versprechen auf, wenn dies abgeschlossen ist.

 h . stop ( ) ;
h . start ( ) ; // could accidentally start too soon

h . stop ( ) . then ( h . start ) ; // might take a small time

.hidden

Es gibt auch ein Mitglied .hidden , das die Anzahl ohne Funktionsaufruf angibt:

 console . log ( h . hidden ) ; // 34

.elements

Eine NodeList aller Elemente, die Holmes berücksichtigt. Es gibt auch .elementsLength für die Anzahl der Elemente und .elementsArray für ein Array der Elemente.

.input

Die Eingabe, die Holmes durchsucht. Es gibt auch die letzte Suchzeichenfolge als .searchString

.placeholder

Der aktuelle Platzhalter (DOM-Knoten).

.running

Ob diese Instanz ausgeführt wird oder nicht.

.options

Zeigt die für diese Instanz von Holmes ausgewählten Optionen an. Sie können solche Optionen auch nach der Initialisierung festlegen.

 console . log ( h . options ) ; // specified options

Hinweis: Das Festlegen von Optionen nach der Ausführung erfordert möglicherweise h.stop().then(h.start)

Vitrine

Was	WHO	Bild
bullg.it	@haroenv
Familie.scss	@lukyvj
wikio.be	@bistory
Lunchbreakapp.be	@AndreasBackx

Ich würde gerne herausfinden, wie die Leute mein Projekt nutzen. Lassen Sie mich wissen, wenn Sie vorgestellt werden möchten!

Fragen?

Kompatibel bis IE11. Zur Unterstützung älterer Browser müssen Sie classList , addEventListener und das input beispielsweise mit remy/polyfills polyfillen. Ich habe das selbst noch nicht ausprobiert, also lassen Sie mich wissen, was Sie verwendet haben, wenn Sie ältere Browser unterstützen!

Für IE11 müssen Sie Object.assign und String.includes mehrfach ausfüllen. Dies können Sie wie in Nr. 90 beschrieben tun

Lass es mich auf Twitter wissen: @haroenv, oder in einer Ausgabe.

Mitwirken

Beiträge sind jederzeit willkommen! Hier sind einige lose Richtlinien:

• Verwenden Sie feature branches
• Mach es nicht langsamer
• Erklären Sie, warum Sie eine Funktion wünschen
• npm run doc um die Dokumentation neu zu erstellen

Der Aufbau zu einer UMD erfolgt per Rollup ( npm run build ).

Aber ich beiße nicht, wenn Sie Fragen oder Unsicherheiten haben, rufen Sie mich zum Beispiel auf Gitter an.

Lizenz

Apache 2.0