Filter command
Dynamically filter your content and only show what’s currently needed
Basic Usage (HTML)
data-jkit="[filter:by=text;affected=ul > li]"
Advanced Init (JavaScript)
$('#myelement').jKit('filter', { 'by': 'text', 'affected': 'ul > li' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| by | “class” or “text” | class | By what type to filter your content |
| affected | jQuery selector | Which DOM elements are affected? | |
| logic | “and” or “or” | and | Do all have to match (and) or at least one (or) |
| speed | Int or “fast”, “slow” (Milliseconds) | 250 | The duration of the animation in milliseconds, bigger = slower. |
| animation | “fade”, “slide” or “none” | fade | The type of animation used for the transition |
| easing | String (“linear” or easing plugin option) | linear | The easing behavior of the animation |
| global | “yes” or “no” | no | Search the affected elements inside the current DOM node or inside the whole document? |
| loader | DOM element | The applied element is being shown while the filter is searching |
Events
| Event | Description |
|---|---|
| clicked | Triggered on change and on click of one of the “jkit-filter” elements |
| complete | Triggered after the filtering is finished |
Examples
Basic example:
In this example we have three inputs that define, based on an elements class, what to filter:
- Entry 1 … (test1)
- Entry 2 … (test2)
- Entry 3 … (test3)
- Entry 4 … (test2 long)
- Entry 5 … (test1 long)
- Entry 6 … (test3)
- Entry 7 … (test2)
- Entry 8 … (test1 test3)
- Entry 9 … (test1 test2)
- Entry 10 … (test99)
Source:
<div class="box" data-jkit="[filter:by=text;affected=ul > li]"> <select class="jkit-filter"> <option value="">All</option> <option value="test1">test1</option> <option value="test2" selected>test2</option> <option value="test3">test3</option> <option value="test1 test2">test1 & test2</option> </select> <select class="jkit-filter"> <option value="" selected>All</option> <option value="long">long</option> </select> <input type="text" class="jkit-filter" value=""> <ul> <li class="test1">Entry 1 ... (test1)</li> <li class="test2">Entry 2 ... (test2)</li> <li class="test3">Entry 3 ... (test3)</li> <li class="test2 long">Entry 4 ... (test2 long)</li> <li class="test1 long">Entry 5 ... (test1 long)</li> <li class="test3">Entry 6 ... (test3)</li> <li class="test2">Entry 7 ... (test2)</li> <li class="test1 test3">Entry 8 ... (test1 test3)</li> <li class="test1 test2">Entry 9 ... (test1 test2)</li> <li class="test99">Entry 10 ... (test99)</li> </ul> </div>
Table search:
You can use the filter command to search through the data inside a table:
(try searching for “Gerber”)
| Name | Location | Birthday |
|---|---|---|
| Mr. Max Keller | CH-7278 Davos Monstein | 1-29-1986 |
| Ms. Sophia Roth | CH-3186 Düdingen | 2-16-1955 |
| Mr. Fredi Baumann | CH-6543 Arvigo | 11-21-1993 |
| Ms. Hannah Zimmermann | LI-9493 Mauren | 6-26-1967 |
| Ms. Maja Brunner | D-21207 Seevetal | 10-22-1934 |
| Mr. Tom Fischer | LI-9492 Eschen | 5-19-1955 |
| Ms. Alina Gerber | D-21710 Engelschoff | 10-15-1981 |
| Mr. Tim Gerber | CH-6543 Arvigo | 12-8-2022 |
| Mr. Felix Meier | LI-9486 Schaanwald | 8-26-1975 |
| Mr. Fredi Müller | LI-9486 Schaanwald | 10-24-1953 |
| Mr. Tim Gerber | CH-1773 Léchelles | 12-25-1966 |
| Ms. Lilli Meyer | D-21207 Seevetal | 11-29-1938 |
| Ms. Emilie Fischer | D-04299 Leipzig | 11-7-2022 |
| Mr. Fredi Graf | CH-6534 S. Vittore | 12-7-2022 |
| Ms. Cordelia Weber | CH-6543 Arvigo | 2-23-1967 |
Source:
<div data-jkit="[filter:by=text;affected=table > tbody > tr]"> Search: <input type="text" class="jkit-filter" value=""> (try searching for "Gerber") <table width="100%"> <thead> <tr> <th>Name</th> <th>Location</th> <th>Birthday</th> </tr> </thead> <tbody> <tr><td>Mr. Max Keller</td><td>CH-7278 Davos Monstein</td><td>1-29-1986</td></tr> <tr><td>Ms. Sophia Roth</td><td>CH-3186 Düdingen</td><td>2-16-1955</td></tr> <tr><td>Mr. Fredi Baumann</td><td>CH-6543 Arvigo</td><td>11-21-1993</td></tr> <tr><td>Ms. Hannah Zimmermann</td><td>LI-9493 Mauren</td><td>6-26-1967</td></tr> <tr><td>Ms. Maja Brunner</td><td>D-21207 Seevetal</td><td>10-22-1934</td></tr> <tr><td>Mr. Tom Fischer</td><td>LI-9492 Eschen</td><td>5-19-1955</td></tr> <tr><td>Ms. Alina Gerber</td><td>D-21710 Engelschoff</td><td>10-15-1981</td></tr> <tr><td>Mr. Tim Gerber</td><td>CH-6543 Arvigo</td><td>12-8-1943</td></tr> <tr><td>Mr. Felix Meier</td><td>LI-9486 Schaanwald</td><td>8-26-1975</td></tr> <tr><td>Mr. Fredi Müller</td><td>LI-9486 Schaanwald</td><td>10-24-1953</td></tr> <tr><td>Mr. Tim Gerber</td><td>CH-1773 Léchelles</td><td>12-25-1966</td></tr> <tr><td>Ms. Lilli Meyer</td><td>D-21207 Seevetal</td><td>11-29-1938</td></tr> <tr><td>Ms. Emilie Fischer</td><td>D-04299 Leipzig</td><td>11-7-1942</td></tr> <tr><td>Mr. Fredi Graf</td><td>CH-6534 S. Vittore</td><td>12-7-1971</td></tr> <tr><td>Ms. Cordelia Weber</td><td>CH-6543 Arvigo</td><td>2-23-1967</td></tr> </tbody> </table> </div>
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]