jquery searchable
vents
Neueste Version: v1.1.0 (Änderungsprotokoll ansehen)
Winziges, schnelles jQuery-Plugin zum Durchsuchen von Elementen während der Eingabe. Dieses Plugin wird von Stidges (Twitter | Github) erstellt und gepflegt.
Klicken Sie hier, um eine Demo dieses Plugins in Aktion anzusehen (gehostet auf Bootsnipp)
Nachdem Sie dieses Plugin heruntergeladen haben, fügen Sie es nach dem Laden von jQuery in Ihre HTML-Datei ein:
< script src =" jquery.js " > </ script >
< script src =" jquery.searchable.js " > </ script > Hinweis : Wenn Sie ältere Browser wie <IE9 unterstützen möchten, können Sie jquery.searchable-ie.js anstelle von jquery.searchable.js verwenden. Diese Version enthält eine Polyfüllung für die Funktion Array.prototype.reduce und ist daher etwas größer (einige hundert Bytes).
Danach können Sie das Plugin einfach auf dem gewünschten Element initialisieren. In diesem Beispiel wird eine Tabelle mit der ID „Tabelle“ verwendet. Standardmäßig verwendet das Plugin eine Eingabe mit der ID „Suche“ (lesen Sie im Abschnitt „Konfiguration“ unten, wie Sie dies ändern können):
$ ( '#table' ) . searchable ( ) ;Dieses Plugin bietet folgende Konfigurationsmöglichkeiten:
| Option | Standardwert | Beschreibung |
|---|---|---|
| Wähler | 'tbody tr' | Definiert den Haupt-jQuery-Selektor innerhalb des Elements, auf dem das Plugin initialisiert wird. Dadurch werden die Containerelemente ausgewählt, die angezeigt oder ausgeblendet werden sollen, z. B. tr s innerhalb einer Tabelle oder ein div.your-special-class innerhalb des durchsuchbaren Elements. |
| childSelector | 'td' | Definiert den untergeordneten Selektor innerhalb des oben definierten „Selektors“. Dadurch werden die durchsuchbaren Elemente innerhalb des „selector“-Elements ausgewählt, z. B. td oder .searchable . |
| Suchfeld | '#search' | Das Eingabeelement, das für den Sucheingabefilter verwendet wird |
| gestreift | false | Definiert, ob das Element gestreift ist und bei der Suche erneut gestreift werden soll (entweder true oder false ) |
| oddRow | { } | Definiert das CSS-Objekt, das auf die ungeraden Zeilen angewendet werden soll (wenn striped auf true gesetzt ist). |
| evenRow | { } | Definiert das CSS-Objekt, das auf die geraden Zeilen angewendet werden soll (wenn striped auf true gesetzt ist). |
| verstecken | function | Ermöglicht Ihnen, eine benutzerdefinierte Ausblendfunktion zu definieren. Diese Funktion akzeptiert einen Parameter, nämlich das auszublendende Element (Zeile). Standardmäßig wird elem.hide() verwendet, um die Zeile auszublenden. |
| zeigen | function | Ermöglicht Ihnen, eine benutzerdefinierte Show-Funktion zu definieren. Diese Funktion akzeptiert einen Parameter, nämlich das auszublendende Element (Zeile). Standardmäßig wird elem.show() verwendet, um die Zeile anzuzeigen. |
| Suchtyp | 'default' | Definiert den Matcher, der bei der Suche verwendet werden soll. Zulässige Werte sind 'fuzzy' , 'strict' und 'default' . |
| onSearchActive | false | Ermöglicht Ihnen, eine Funktion zu definieren, die aufgerufen werden soll, wenn die Suche aktiv ist. Diese Funktion wird immer dann aufgerufen, wenn der Benutzer etwas in die Sucheingabe eingibt und die Sucheingabe nicht leer ist. Das durchsuchbare Element und der Suchbegriff werden an die Funktion übergeben. |
| onSearchEmpty | false | Ermöglicht Ihnen, eine Funktion zu definieren, die aufgerufen wird, wenn die Sucheingabe leer ist. Diese Funktion wird einmal aufgerufen, wenn die Sucheingabe leer oder gelöscht ist. Das durchsuchbare Element wird an die Funktion übergeben. |
| onSearchFocus | false | Ermöglicht Ihnen, eine Funktion zu definieren, die aufgerufen wird, wenn die Sucheingabe fokussiert ist. this Kontext dieser Funktion ist das Sucheingabeelement. |
| onSearchBlur | false | Ermöglicht Ihnen, eine Funktion zu definieren, die aufgerufen wird, wenn die Sucheingabe unscharf ist. this Kontext dieser Funktion ist das Sucheingabeelement. |
| clearOnLoad | false | Legt fest, ob die Sucheingabe beim Laden der Seite gelöscht werden soll (entweder true oder false ). |
In diesem Beispiel werden die oben gezeigten Konfigurationen verwendet, um das Plugin anzupassen:
$ ( '#element' ) . searchable ( {
selector : '.row' ,
childSelector : '.column' ,
searchField : '#mySearchInput' ,
striped : true ,
oddRow : { 'background-color' : '#f5f5f5' } ,
evenRow : { 'background-color' : '#fff' } ,
hide : function ( elem ) {
elem . fadeOut ( 50 ) ;
} ,
show : function ( elem ) {
elem . fadeIn ( 50 ) ;
} ,
searchType : 'fuzzy' ,
onSearchActive : function ( elem , term ) {
elem . show ( ) ;
} ,
onSearchEmpty : function ( elem ) {
elem . hide ( ) ;
} ,
onSearchFocus : function ( ) {
$ ( '#feedback' ) . show ( ) . text ( 'Type to search.' ) ;
} ,
onSearchBlur : function ( ) {
$ ( '#feedback' ) . hide ( ) ;
} ,
clearOnLoad : true
} ) ; Version 1.0.0:
Version 1.1.0:
clearOnLoad wurde hinzugefügt, mit der Sie die Sucheingabe beim Laden/Aktualisieren der Seite löschen können. Bitte zögern Sie nicht, alle Probleme oder Pull-Anfragen einzureichen, sie sind mehr als willkommen. Bitte geben Sie beim Einreichen eines Problems die Versionsnummer an und beschreiben Sie das Problem detailliert, damit es schnellstmöglich behoben werden kann!
Copyright (c) 2014 – Stidges – lizenziert unter der MIT-Lizenz.
