A tiny library for filtering content based in the input value.
Configure the select filter using [data-type="select"]
on the <select>
tag:
<select class="filter-select" data-type="select">
<option value="">Filter</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
And the items that will be filtered with data-type="filter-item"
and data-value=""
:
<div class="content">
<div class="item red" data-type="filter-item" data-value="red"></div>
<div class="item green" data-type="filter-item" data-value="green"></div>
<div class="item blue" data-type="filter-item" data-value="blue"></div>
</div>
Initialize the filter call the filter
function:
<script>
filter('[data-type="select"]', false);
</script>
The input filter has some options:
The hasSiblings
is a boolean option to filter with more than one <select>
.
<script>
filter('[data-type="select"]', hasSiblings);
</script>
- Create filter for select input
- Create filter for text input
- Remove libDOM dependency
- Publish on NPM
Kevin Oliveira © MIT