jQuery - Filters
Use jQuery Filters to search and display specific elements dynamically. Filters help users quickly find relevant content in tables, lists, or any other elements.
✅ Real-time search – No need to refresh the page.
✅ Case-insensitive – Works with uppercase and lowercase letters.
✅ Easy to implement – Just a few lines of jQuery.
1. Filter Tables
Perform a case-insensitive search in a table for names, emails, or other text.
👉 Example: Type in the input field to search the table for first names, last names, or emails.
$(document).ready(function(){
$(“#tableSearch”).on(“keyup”, function() {
var value = $(this).val().toLowerCase();
$(“#dataTable tr”).filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
📌 How It Works:
✔ Loops through each table row (tr) and checks if it matches the search input.
✔ Hides rows that do not match the search query using .toggle().
✔ Converts text to lowercase using .toLowerCase() for case-insensitive searching.
2. Filter Lists
Search for items inside a list dynamically.
👉 Example:
$(document).ready(function(){
$(“#listSearch”).on(“keyup”, function() {
var value = $(this).val().toLowerCase();
$(“#itemList li”).filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
📌 How It Works:
✔ Filters each <li> item based on the search input.
✔ Hides list items that do not match using .toggle().
✔ Search is case-insensitive (“Apple”, “apple”, “APPLE” all match).
3. Filter Any Content (Divs, Paragraphs, Buttons, etc.)
Search for text inside any element such as paragraphs, buttons, or divs.
👉 Example:
$(document).ready(function(){
$(“#contentSearch”).on(“keyup”, function() {
var value = $(this).val().toLowerCase();
$(“#contentBox *”).filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
📌 How It Works:
✔ Filters all child elements (*) inside #contentBox.
✔ Hides elements that do not match the search text.
✔ Works with paragraphs, divs, buttons, etc.
4. Filter a Dropdown List (Select Options)
Filter options inside a dropdown list dynamically.
👉 Example:
$(document).ready(function(){
$(“#dropdownSearch”).on(“keyup”, function() {
var value = $(this).val().toLowerCase();
$(“#dropdownList option”).filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
📌 How It Works:
✔ Filters <option> elements inside the <select> dropdown.
✔ Hides options that do not match the search input.
✔ Provides a better user experience when selecting from long lists.
Conclusion
🎯 jQuery Filters allow real-time search in tables, lists, divs, and dropdowns.
🎯 Uses .filter() to find matching elements and .toggle() to show/hide them.
🎯 Case-insensitive searching improves user experience.
