j-Search

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

Simple fulltext search component. This component can show/hide elements according to the searching phrase.

Configuration:

selector {String} jQuery selector for searching
attribute {String} element attribute which contains a search phrase (default: data-search)
class {String} this class will be used if the element is not found (default: hidden)
delay {Number} typing delay (default: 50 ms)
delaydatasource {Number} a delay for re-search when the data-source is changed (default: 100 ms)
UPD exec {String} a link to function(stats:{ total: Number, count: Number, hidden: Number, search: String, is: Boolean }) which will be evaluated if the component searches for something
datasource {String} a path to data-source for watching of changes
splitwords {Boolean} tries to find word in various position (default: true)
NEW custom {String} a path to the Function(element, search) must return Boolean for custom searching

Good to know:

This component adds the classes below automatically when:

class ui-search-used is added when the user searches for something
class ui-search-empty is added when the user searches for something and at the same time nothing was found

Use it with <ui-component name="search">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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>