Filtering

Filter list based on value in text box

This script will read certain values from HTML and create filtering based on the classes in the HTML.

The input which uses the classes: "js-filter-content-keyup" or "js-filter-content-change" will get the function. It will then filter "js-filter-box" boxes inside the container specified within "data-filter-content" attribute base on the values inside the "js-filter-text" inside those boxes.

Remember to call the Init function on the pages you want to use it.

funcs.RegisterFilters();

var funcs = {
    RegisterFilters: function () {
        $(".js-filter-content-keyup").keyup(funcs.Filter);
        $(".js-filter-content-change").change(funcs.Filter);
    },
    RegisterDotReplacer: function () {
        $(".js-dot-replacer-keyup").keyup(funcs.DotReplacer);
    },
    Filter: function () {
        var trigger = $(this);
        var filterId = trigger.attr("data-filter-content");
        var filterObjects = $("#" + filterId + " .js-filter-box");

        var valueToFind = trigger.val().toLowerCase();

        $.each(filterObjects, function (ind, obj) {
            var jObj = $(obj);
            if (valueToFind === "" || jObj.find(".js-filter-text").text().toLowerCase().indexOf(valueToFind) > -1) {
                jObj.show();
            } else {
                jObj.hide();
            }
        });
    }
}

HTML code for the list and items that will be filtered

<input type="text" class="js-filter-content-keyup" data-filter-content="filter-box-container"/>
    
<div class="filter-box-container>
    <div class="js-filter-box">
        <a class="js-filter-text">
            Text to filter on 1
        </a>
    </div>
    <div class="js-filter-box">
        <a class="js-filter-text">
            Text to filter on 2
        </a>
    </div>
    <div class="js-filter-box">
        <a class="js-filter-text">
            Text to filter on 3
        </a>
    </div>
</div>