ForgeComponente
ro

Componente

j-Search

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Componentul de căutare complet simplu. Acest component poate afișa/ascunsa elemente în funcție de fraza de căutare.


Configurarea:

  • selector {String} jQuery selector pentru căutare
  • Atribuția elementului attribute {String} care conține o frază de căutare (default: data-search)
  • class {String} această clasă va fi utilizată dacă elementul nu este găsit (default: hidden)
  • • întârziere de tipare delay {Number} (default: 50 ms)
  • delaydatasource {Number} o întârziere pentru re-să căutați atunci când sursa de date este modificată (default: 100 ms)
  • UPD exec {String} un link la function(stats:{ total: Number, count: Number, hidden: Number, search: String, is: Boolean }) care va fi evaluat dacă componenta caută ceva
  • datasource {String} - o cale către sursa de date pentru a observa schimbările
  • splitwords {Boolean} încearcă să găsească cuvântul în diferite poziții (default: true)
  • NEW custom {String} o cale către Function(element, search) must return Boolean pentru căutarea personalizată

bine să știi:

Acest component adaugă automat clasele de mai jos atunci când:

  • Clasa ui-search-used este adăugată atunci când utilizatorul caută ceva
  • Clasa ui-search-empty este adăugată atunci când utilizatorul caută ceva și în același timp nu a fost găsit nimic

Utilizați-l cu <ui-component name="search">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>