jquery searchable

Complemento de búsqueda jQuery

Última versión: v1.1.0 (Ver el registro de cambios)

Complemento jQuery pequeño y rápido para buscar elementos a medida que escribe. Este complemento es creado y mantenido por Stidges (Twitter | Github).

Características

• Ligero . ¡Este complemento está minimizado y comprimido con gzip a solo ~ 1 kB!
• Rápido . Este complemento está optimizado para una búsqueda rápida y sin demoras incluso en conjuntos de elementos grandes.
• Múltiples tipos de búsqueda . ¡Este complemento proporciona tres tipos de búsqueda diferentes listos para usar! Coincidencia aproximada, coincidencia estricta (distingue entre mayúsculas y minúsculas) y coincidencia predeterminada (no distingue entre mayúsculas y minúsculas).
• Trazado automático de filas . Al buscar en una tabla, las filas se ocultan cuando no coinciden. Cuando se utiliza un marco CSS como Bootstrap, esto arruinaría la creación de bandas en la tabla. Este complemento le permite definir el CSS que se aplicará a filas pares e impares, y las actualiza durante la búsqueda.
• Mostrar/ocultar personalizado . Puede definir funciones personalizadas para mostrar y ocultar los elementos durante la búsqueda.
• Busca cualquier cosa . Este complemento no está restringido a su uso en tablas; se puede usar cualquier conjunto de elementos que tenga "filas" con "columnas" dentro.

Manifestación

Haga clic aquí para ver una demostración de este complemento en acción (alojado en Bootsnipp)

Empezando

Uso básico

Después de descargar este complemento, inclúyalo en su archivo HTML después de cargar jQuery:

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

Nota : si desea admitir navegadores más antiguos como <IE9, puede usar jquery.searchable-ie.js en lugar de jquery.searchable.js . Esta versión incluye un polyfill para la función Array.prototype.reduce y, por lo tanto, es un poco más grande (un par de cientos de bytes).

Después de eso, simplemente puede inicializar el complemento en el elemento deseado. Este ejemplo utiliza una tabla con una identificación de "tabla". De forma predeterminada, el complemento utiliza una entrada con una identificación de 'búsqueda' (lea sobre cómo cambiar esto en la sección Configuración a continuación):

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

Configuración

Este complemento proporciona las siguientes opciones de configuración:

Opción	Valor predeterminado	Descripción
selector	'tbody tr'	Define el selector principal de jQuery dentro del elemento en el que se inicializa el complemento. Esto selecciona los elementos del contenedor para mostrar u ocultar, como tr s dentro de una tabla o div.your-special-class dentro del elemento de búsqueda.
niñoSelector	'td'	Define el selector secundario dentro del 'selector' definido anteriormente. Esto selecciona los elementos buscables dentro del elemento 'selector', como td o .searchable .
campo de búsqueda	'#search'	El elemento de entrada que se utiliza para el filtro de entrada de búsqueda.
a rayas	false	Define si el elemento está rayado y se debe volver a rayar al realizar la búsqueda (ya sea true o false ).
fila impar	{ }	Define el objeto CSS que se aplicará a las filas impares (cuando striped se establece en true ).
fila par	{ }	Define el objeto CSS que se aplicará a las filas pares (cuando striped se establece en true ).
esconder	function	Le permite definir una función de ocultación personalizada. Esta función acepta un parámetro, que es el elemento (fila) que se oculta. De forma predeterminada, utilizará elem.hide() para ocultar la fila.
espectáculo	function	Le permite definir una función de presentación personalizada. Esta función acepta un parámetro, que es el elemento (fila) que se oculta. De forma predeterminada, utilizará elem.show() para mostrar la fila.
tipo de búsqueda	'default'	Define el comparador que se utilizará durante la búsqueda. Los valores permitidos son 'fuzzy' , 'strict' y 'default' .
onSearchActive	false	Le permite definir una función que se llamará cuando la búsqueda esté activa. Esta función se llamará siempre que el usuario escriba en la entrada de búsqueda y la entrada de búsqueda no esté vacía. El elemento buscable y el término de búsqueda se pasarán a la función.
enBuscarVacío	false	Le permite definir una función que se llamará cuando la entrada de búsqueda esté vacía. Esta función se llamará una vez cuando la entrada de búsqueda esté vacía o borrada. El elemento buscable se pasará a la función.
enBuscarEnfoque	false	Le permite definir una función que se llamará cuando la entrada de búsqueda esté enfocada. this contexto de esta función será el elemento de entrada de búsqueda.
onSearchBlur	false	Le permite definir una función que se llamará cuando la entrada de búsqueda esté borrosa. this contexto de esta función será el elemento de entrada de búsqueda.
borrar al cargar	false	Determina si la entrada de búsqueda debe borrarse al cargar la página (ya sea true o false ).

Uso de ejemplo

Este ejemplo utiliza las configuraciones que se muestran arriba para personalizar el complemento:

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

Registro de cambios

Versión 1.0.0:

• Lanzamiento inicial.

Versión 1.1.0:

• Se agregaron algunos eventos que le permiten llamar a funciones personalizadas durante el ciclo de vida de la búsqueda: onSearchActive, onSearchEmpty, onSearchFocus, onSearchBlur (consulte la configuración para obtener más información).
• Se agregó la configuración clearOnLoad que le permite borrar la entrada de búsqueda al cargar/actualizar la página.

Contribuciones y problemas

No dude en enviar cualquier problema o solicitud de extracción; son más que bienvenidos. Al enviar un problema, especifique el número de versión y describa el problema en detalle para que pueda resolverse lo antes posible.

Licencia

Copyright (c) 2014 - Stidges - Licenciado bajo la licencia MIT.