jquery searchable

Plugin de recherche jQuery

Dernière version : v1.1.0 (Voir le journal des modifications)

Petit plugin jQuery rapide pour rechercher des éléments au fur et à mesure que vous tapez. Ce plugin est créé et maintenu par Stidges ( Twitter | Github ).

Caractéristiques

• Léger . Ce plugin n'est que d'environ 1 Ko minifié et compressé !
• Rapide . Ce plugin est optimisé pour une recherche rapide et sans décalage, même dans de grands ensembles d'éléments.
• Plusieurs types de recherche . Ce plugin propose trois types de recherche différents prêts à l'emploi ! Correspondance floue, correspondance stricte (sensible à la casse) et correspondance par défaut (insensible à la casse).
• Rayage automatique des rangées . Lors d'une recherche dans un tableau, les lignes sont masquées lorsqu'elles ne correspondent pas. Lorsque vous utilisez un framework CSS comme Bootstrap, cela gâcherait la répartition de votre table. Ce plugin vous permet de définir le CSS à appliquer aux lignes paires et impaires, et de les mettre à jour lors de la recherche.
• Afficher/masquer personnalisé . Vous pouvez définir des fonctions personnalisées pour afficher et masquer les éléments lors de la recherche.
• Recherchez n'importe quoi . Ce plugin n'est pas limité à une utilisation sur les tableaux, tout ensemble d'éléments contenant des « lignes » avec des « colonnes » à l'intérieur peut être utilisé.

Démo

Cliquez ici pour voir une démo de ce plugin en action (hébergé sur Bootsnipp)

Commencer

Utilisation de base

Après avoir téléchargé ce plugin, incluez-le dans votre fichier HTML après avoir chargé jQuery :

 < script src =" jquery.js " > </ script >
< script src =" jquery.searchable.js " > </ script >

Remarque : Si vous souhaitez prendre en charge les navigateurs plus anciens comme <IE9, vous pouvez utiliser jquery.searchable-ie.js au lieu de jquery.searchable.js . Cette version inclut un polyfill pour la fonction Array.prototype.reduce et est donc légèrement plus grande (quelques centaines d'octets).

Après cela, vous pourrez simplement initialiser le plugin sur l’élément souhaité. Cet exemple utilise une table avec un identifiant 'table'. Par défaut, le plugin utilise une entrée avec un identifiant « recherche » (découvrez comment modifier cela dans la section Configuration ci-dessous) :

 $ ( '#table' ) . searchable ( ) ;

Configuration

Ce plugin fournit les options de configuration suivantes :

Option	Valeur par défaut	Description
sélecteur	'tbody tr'	Définit le sélecteur jQuery principal au sein de l'élément sur lequel le plugin est initialisé. Cela sélectionne les éléments du conteneur à afficher ou à masquer, tels que tr s dans un tableau ou un div.your-special-class dans l'élément consultable.
enfantSélecteur	'td'	Définit le sélecteur enfant dans le « sélecteur » défini ci-dessus. Ceci sélectionne les éléments consultables dans l'élément 'selector', tels que td ou .searchable .
champ de recherche	'#search'	L'élément d'entrée utilisé pour le filtre d'entrée de recherche
rayé	false	Définit si l'élément est rayé et doit être re-rayé lors de la recherche (soit true soit false )
ligne impaire	{ }	Définit l'objet CSS à appliquer aux lignes impaires (lorsque striped est défini sur true ).
mêmeRang	{ }	Définit l'objet CSS à appliquer aux lignes paires (lorsque striped est défini sur true ).
cacher	function	Permet de définir une fonction de masquage personnalisée. Cette fonction accepte un paramètre, qui est l'élément (ligne) masqué. Par défaut, il utilisera elem.hide() pour masquer la ligne.
montrer	function	Permet de définir une fonction d'affichage personnalisée. Cette fonction accepte un paramètre, qui est l'élément (ligne) masqué. Par défaut, il utilisera elem.show() pour afficher la ligne.
Type de recherche	'default'	Définit le matcher à utiliser lors de la recherche. Les valeurs autorisées sont 'fuzzy' , 'strict' et 'default' .
surRechercheActive	false	Permet de définir une fonction à appeler lorsque la recherche est active. Cette fonction sera appelée chaque fois que l'utilisateur saisit l'entrée de recherche et que l'entrée de recherche n'est pas vide. L'élément consultable et le terme de recherche seront transmis à la fonction.
surRechercheVide	false	Vous permet de définir une fonction à appeler lorsque l'entrée de recherche est vide. Cette fonction sera appelée une fois lorsque l'entrée de recherche est vide ou effacée. L'élément recherché sera transmis à la fonction.
surSearchFocus	false	Vous permet de définir une fonction à appeler lorsque l'entrée de recherche est ciblée. Le contexte this de cette fonction sera l'élément d'entrée de recherche.
surRechercheFlou	false	Vous permet de définir une fonction à appeler lorsque l'entrée de recherche est floue. Le contexte this de cette fonction sera l'élément d'entrée de recherche.
effacerOnLoad	false	Détermine si l'entrée de recherche doit être effacée lors du chargement de la page (soit true soit false ).

Exemple d'utilisation

Cet exemple utilise les configurations présentées ci-dessus pour personnaliser le plugin :

 $ ( '#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
} ) ; 

Journal des modifications

Version 1.0.0 :

• Version initiale.

Version 1.1.0 :

• Ajout de quelques événements qui vous permettent d'appeler des fonctions personnalisées pendant le cycle de vie de la recherche : onSearchActive, onSearchEmpty, onSearchFocus, onSearchBlur (consultez la configuration pour plus d'informations).
• Ajout du paramètre clearOnLoad qui vous permet d'effacer l'entrée de recherche lors du chargement/actualisation de la page.

Contribution et problèmes

N'hésitez pas à soumettre des problèmes ou des demandes de tirage, ils sont plus que les bienvenus. Lorsque vous soumettez un problème, veuillez spécifier le numéro de version et décrire le problème en détail afin qu'il puisse être résolu le plus rapidement possible !

Licence

Copyright (c) 2014 - Stidges - Sous licence MIT.