j-Search

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Eenvoudige volledige zoekcomponent. deze component kan elementen weergeven / verbergen volgens de zoekwoord.

Configuratie:

selector {String} jQuery selector voor het zoeken
attribute {String} element attribuut dat een zoekwoord bevat (default: data-search)
class {String} deze klasse wordt gebruikt als het element niet is gevonden (default: hidden)
delay {Number} schrijfverwijdering (default: 50 ms)
delaydatasource {Number} een vertraging voor herzoek wanneer de gegevensbron is gewijzigd (default: 100 ms)
UPD exec {String} een link naar function(stats:{ total: Number, count: Number, hidden: Number, search: String, is: Boolean }) die zal worden beoordeeld als de component iets zoekt
datasource {String} een route naar de gegevensbron voor het waarnemen van veranderingen
splitwords {Boolean} probeert het woord in verschillende posities te vinden (default: true)
NEW custom {String} een weg naar de Function(element, search) must return Boolean voor aangepaste zoekopdracht

Goed om te weten:

Deze component voegt de onderstaande klassen automatisch toe wanneer:

klassen ui-search-used wordt toegevoegd wanneer de gebruiker op zoek is naar iets
klassen ui-search-empty wordt toegevoegd wanneer de gebruiker iets zoekt en tegelijkertijd niets is gevonden

Gebruik het met <ui-component name="search">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>