Sample usage link - https://nirbhay.me/jQuery-Search-Filter-Plugin
Custom plugin template sourced from http:https://stefangabos.ro/jquery/jquery-plugin-boilerplate/
Sample built on top of boiler plate code from bootstrap.
<!-- Example HTML Code -->
<div class="container">
<h4>Example 2 - With Simple List Group [Case Sensitive]</h4>
<!-- Text Input -->
<div class="active-cyan-3 active-cyan-4 mb-4">
<input id="list-search-2" class="form-control" type="text" placeholder="Try Searching ..." aria-label="Search">
</div>
<!-- Text Input Ends -->
<ul class="list-group" id="my-list-items-2">
<li class="list-group-item">This is a list group item</li>
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
</ul>
</div>
<!-- Example HTML Ends -->
<script>
$("#list-search").filterElements({
parentElementWrapper: "#my-list-items",
childElementToFilter: '.list-group-item',
caseInsensitive: true
});
</script>
- There are other option like 'controlNext' which controls the display of the sibling child element.
- Also the text and background colors can be changed for the child elements if marking is enabled.
- You can use it to filter other elements like accordions or any other kind of list items too.
- Have fun using the plugin!
This project is licensed under the MIT License - see the LICENSE.md file for details
- Stefan Gabos - http:https://stefangabos.ro
- Bootstrap - https://getbootstrap.com/