jQuery filter contents on text input

How to filter out page content based on text input value using jQuery. A search input is used to find if the value exists in each div.

CodePen example.

Explanation

When the contents of the text input are changed the filterRows function will be called

$('#animal-search').on('input', filterRows);

Here is the filterRows function with each part explained below

function filterRows() {
    let query = $.trim($('#animal-search').val().toUpperCase());
    setTimeout(function () {
        $('div.group-row').each(function () {
            let animal1 = $(this).closest('.group-row').find('#animal1').val().trim().toUpperCase();
            let animal2 = $(this).closest('.group-row').find('#animal2').val().trim().toUpperCase();
            let animal3 = $(this).closest('.group-row').find('#animal3').val().trim().toUpperCase();

            if (animal1.indexOf(query) !== -1 || animal2.indexOf(query) !== -1 || animal3.indexOf(query) !== -1) {
                $(this).closest('div.group-row').fadeIn();//Show
            } else {
                $(this).closest('div.group-row').fadeOut();//Hide
            }
        });
    }, 500);
}

Breaking down this function piece by piece:

let query = $.trim($('#animal-search').val().toUpperCase());

This gets the text from the input and transforms it into all uppercase. Putting the value into uppercase helps make the filter be compatible as case insensitive.

setTimeout(function () {
    ///
    ///
    ///
}, 500);

setTimeout will delay the inner contents for a specific time as milliseconds.

$('div.group-row').each(function () {
    ///
    ///
    ///
});

Loop through every div on the page with the class group-row.

let animal1 = $(this).closest('.group-row').find('#animal1').val().trim().toUpperCase();
let animal2 = $(this).closest('.group-row').find('#animal2').val().trim().toUpperCase();
let animal3 = $(this).closest('.group-row').find('#animal3').val().trim().toUpperCase();

Get the values of the 3 animals in each group (div), these are made uppercase to complete the filter being case insensitive.

if (animal1.indexOf(query) !== -1 || animal2.indexOf(query) !== -1 || animal3.indexOf(query) !== -1) {
    $(this).closest('div.group-row').fadeIn();//Show
} else {
    $(this).closest('div.group-row').fadeOut();//Hide
}

The final part is using indexOf to check if a match is found for the 3 animals in each group.

indexOf will return -1 if it does not exist. fadeOut and fadeIn are used to hide and re-show the divs.

The HTML:

<div class="container">
    <div class="card">
        <div class="card-header">
            <div class="form-group mb-2">
                <label for="animal-search">Search an animal</label>
                <input type="text" class="form-control" id="animal-search" minlength="1" maxlength="64">
            </div>
        </div>
        <div class="card-body">
            <form>
                <div class="row group-row">
                    <h4 class="text-center">Group A</h4>
                    <div class="col-4 an-animal">
                        <label for="animal1">Animal1</label>
                        <input type="text" class="form-control" id="animal1" minlength="1" maxlength="64"
                               value="Dolphin"
                               disabled>
                    </div>
                    <div class="col-4 an-animal">
                        <label for="animal2">Animal2</label>
                        <input type="text" class="form-control" id="animal2" minlength="1" maxlength="64"
                               value="Wallaby"
                               disabled>
                    </div>
                    <div class="col-4 an-animal">
                        <label for="animal3">Animal3</label>
                        <input type="text" class="form-control" id="animal3" minlength="1" maxlength="64" value="Toucan"
                               disabled>
                    </div>
                </div>
                <div class="row group-row">
                    <h4 class="text-center">Group B</h4>
                    <div class="col-4 an-animal">
                        <label for="animal1">Animal1</label>
                        <input type="text" class="form-control" id="animal1" minlength="1" maxlength="64" value="Cicada"
                               disabled>
                    </div>
                    <div class="col-4 an-animal">
                        <label for="animal2">Animal2</label>
                        <input type="text" class="form-control" id="animal2" minlength="1" maxlength="64"
                               value="Giraffe"
                               disabled>
                    </div>
                    <div class="col-4 an-animal">
                        <label for="animal3">Animal3</label>
                        <input type="text" class="form-control" id="animal3" minlength="1" maxlength="64"
                               value="Seahorse"
                               disabled>
                    </div>
                </div>
                <div class="row group-row">
                    <h4 class="text-center">Group C</h4>
                    <div class="col-4 an-animal">
                        <label for="animal1">Animal1</label>
                        <input type="text" class="form-control" id="animal1" minlength="1" maxlength="64" value="Ferret"
                               disabled>
                    </div>
                    <div class="col-4 an-animal">
                        <label for="animal2">Animal2</label>
                        <input type="text" class="form-control" id="animal2" minlength="1" maxlength="64" value=""
                               disabled>
                    </div>
                    <div class="col-4 an-animal">
                        <label for="animal3">Animal3</label>
                        <input type="text" class="form-control" id="animal3" minlength="1" maxlength="64" value=""
                               disabled>
                    </div>
                </div>
                <div class="row group-row">
                    <h4 class="text-center">Group D</h4>
                    <div class="col-4 an-animal">
                        <label for="animal1">Animal1</label>
                        <input type="text" class="form-control" id="animal1" minlength="1" maxlength="64" value="Alpaca"
                               disabled>
                    </div>
                    <div class="col-4 an-animal">
                        <label for="animal2">Animal2</label>
                        <input type="text" class="form-control" id="animal2" minlength="1" maxlength="64" value=""
                               disabled>
                    </div>
                    <div class="col-4 an-animal">
                        <label for="animal3">Animal3</label>
                        <input type="text" class="form-control" id="animal3" minlength="1" maxlength="64"
                               value="Vulture"
                               disabled>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>