Input Filter

A tiny library for filtering content based in the input value.

Sumary

• Configuration
  • Select filter
• Options
  • hasSiblings
• TODO
• License

Configuration

Select filter

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>

View the example here

Options

The input filter has some options:

hasSiblings

The hasSiblings is a boolean option to filter with more than one <select>.

<script>
filter('[data-type="select"]', hasSiblings);
</script>

TODO

• Create filter for select input
• Create filter for text input
• Remove libDOM dependency
• Publish on NPM

License

Kevin Oliveira © MIT