j-Search

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Този компонент може да показва/скъпва елементи в съответствие с търсенето.

Конфигуриране:

selector {String} jQuery селектор за търсене
Атрибут на елемента attribute {String}, който съдържа фраза за търсене (предварително: data-search)
class {String} този клас ще бъде използван, ако елементът не е намерен (предварително: hidden)
delay {Number} Закъснение на теглото (предварително: 50 МС)
delaydatasource {Number} закъснение за преразглеждане, когато източникът на данни се променя (предварително: 100 ms)
UPD exec {String} връзка към function(stats:{ total: Number, count: Number, hidden: Number, search: String, is: Boolean }) която ще бъде оценена, ако компонентът търси нещо
datasource {String} - пътят към източника на данни за промяна
splitwords {Boolean} се опитва да намери думата в различни позиции (предварително: true)
NEW custom {String} пътят към Function(element, search) must return Boolean за персонализирано търсене

Добре е да се знае:

Този компонент автоматично добавя класовете по-долу, когато:

клас ui-search-used се добавя, когато потребителят търси нещо
клас ui-search-empty се добавя, когато потребителят търси нещо и в същото време нищо не е намерено

Използвайте го с <ui-component name="search">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>