Skip to content

This repository contains a jQuery plugin to filter elements in a container based on a text input

License

Notifications You must be signed in to change notification settings

nirbhayph/jQuery-Search-Filter-Plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

jQuery Search Filter Plugin

Sample usage link - https://nirbhay.me/jQuery-Search-Filter-Plugin

Custom plugin template sourced from http://stefangabos.ro/jquery/jquery-plugin-boilerplate/

Sample built on top of boiler plate code from bootstrap.

Sample Usage

HTML

<!-- 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 -->

Plugin Usage

<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!

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Developers:

Acknowledgements and Mentions:

About

This repository contains a jQuery plugin to filter elements in a container based on a text input

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published