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