Scroll to Top

List Filter

Use this plugin to filter alike elements. Make filter on text, can be used with Data Science Projects.

SITEMAP Documentation / Js Plugins / List Filter

Demo

Code copy

<div class="row padY-20">
    <div class="col m12 s12 l12">
        <input type="text" class="form-control" placeholder="Please Type anyword starts from A, B, or C" id="myInput">
        <ul id="myUL">
            <li>
                <a class="font-30 text-grey8">A</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">Action Script</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">Argus,</a>
                <a class="filt">Autocoder,</a>
                <a class="filt">Assembly Language</a>
            </li>
            <li>
                <a class="font-30 text-grey8">B</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">Babbage</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">Bean Shell</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">BASIC</a>
            </li>
            <li>
                <a class="font-30 text-grey8">C</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">C++</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">CHIP-8</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">CLIST</a>
            </li>
        </ul>

    </div>
</div>
<!--Initialize the list filter-->
<script>
    $("#myInput").filterList({
        div: "#myUL",
        watchtext: ".filt",
        watchdiv: ".fildiv"
    });
</script>

List Filter is an expandable plugin. use these options to customize your ideas.

Demo

variable default data-type options function
div .filtered-list string class, tagname, id main wrapper
watchtext .filter-element string class, tagname, id find the text in this div, element.
watchdiv .filter-file string class, tagname, id find the watch text in this div, element.

Code copy

<script>
        $("#myInput").filterList({
            div: "#myUL",
            watchtext: ".filt",
            watchdiv: ".fildiv"
        });

    </script>

Feedback