j-Search

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Componente de búsqueda de texto completo simple. Este componente puede mostrar/ocultar elementos según la frase de búsqueda.

Configuración:

selector {String} selector jQuery para búsqueda
Atributo del elemento attribute {String} que contiene una frase de búsqueda (predeterminado: data-search)
class {String} esta clase se utilizará si no se encuentra el elemento (predeterminado: hidden)
Retraso de escritura delay {Number} (predeterminado: 50 ms)
delaydatasource {Number} un retraso para la investigación cuando se cambia la fuente de datos (predeterminado: 100 ms)
UPD exec {String} un enlace a function(stats:{ total: Number, count: Number, hidden: Number, search: String, is: Boolean }) que será evaluado si el componente busca algo
datasource {String} una ruta a la fuente de datos para observar los cambios
splitwords {Boolean} intenta encontrar palabras en varias posiciones (predeterminado: true)
NEW custom {String} una ruta al Function(element, search) must return Boolean para búsqueda personalizada

Es bueno saberlo:

Este componente agrega las siguientes clases automáticamente cuando:

La clase ui-search-used se agrega cuando el usuario busca algo.
la clase ui-search-empty se agrega cuando el usuario busca algo y al mismo tiempo no encuentra nada

Úselo con <ui-component name="search">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

example.html

<ui-component name="textbox" path="search" config="type:search"></ui-component>
<br />
<ui-component name="search" path="search" config="selector:div">
	<div data-search="Apples">Apples</div>
	<div data-search="Oranges">Oranges</div>
	<div data-search="Pears">Pears</div>
	<div data-search="Black-eye bean">Black-eye bean</div>
	<div data-search="Broccoli">Broccoli</div>
</ui-component>

<script>
	var search = '';
</script>