ForgeKomponenty
cs

Komponenty

j-Search

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Jednoduchá součást vyhledávání plného textu.Tento součást může zobrazovat/skrytí prvky podle hledání fráze.


Konfigurace:

  • selector {String} jQuery vyhledávač
  • attribute {String} prvek, který obsahuje vyhledávací frázi (podmínkou: data-search)
  • class {String} se použije v případě, že prvek není nalezen (předvolený: hidden)
  • Zpoždění písemnosti delay {Number} (předvolené: 50 ms)
  • delaydatasource {Number} zpoždění při opětovném vyhledávání při změně zdroje údajů (předvolené: 100 ms)
  • UPD exec {String} odkaz na function(stats:{ total: Number, count: Number, hidden: Number, search: String, is: Boolean }) který bude hodnocen, pokud komponenta hledá něco
  • datasource {String} - cesta k datovému zdroji pro sledování změn
  • splitwords {Boolean} se pokouší najít slovo v různých pozicích (default: true)
  • NEW custom {String} cesta k Function(element, search) must return Boolean pro přizpůsobené vyhledávání

Dobré vědět:

Tato složka automaticky přidává třídy níže, když:

  • třída ui-search-used se přidává, když uživatel hledá něco
  • třída ui-search-empty se přidává, když uživatel něco hledá a současně nic nebylo nalezeno

Použijte ji s <ui-component name="search">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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>