ForgeComponentes
pt

Componentes

j-Search

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Componente de pesquisa completa: Este componente pode exibir / esconder elementos de acordo com a frase de busca.


Configuração:

  • selector {String} jQuery selecionador para pesquisa
  • Atributo de elemento attribute {String} que contém uma frase de pesquisa (default: data-search)
  • class {String} Esta classe será usada se o elemento não for encontrado (default: hidden)
  • Duração de impressão delay {Number} (default: 50 ms)
  • delaydatasource {Number} um atraso para a busca de novo quando a fonte de dados é alterada (default: 100 ms)
  • UPD exec {String} um link para function(stats:{ total: Number, count: Number, hidden: Number, search: String, is: Boolean }) que será avaliado se o componente procura algo
  • datasource {String} - um caminho para a fonte de dados para monitorar as mudanças
  • splitwords {Boolean} tenta encontrar a palavra em várias posições (default: true)
  • NEW custom {String} um caminho para o Function(element, search) must return Boolean para pesquisa personalizada

Bom para saber:

Este componente adiciona as classes abaixo automaticamente quando:

  • A classe ui-search-used é adicionada quando o usuário procura algo
  • A classe ui-search-empty é adicionada quando o usuário procura algo e ao mesmo tempo nada foi encontrado.

Use-o com <ui-component name="search">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>