Filtering Table Data with jQuery: A Simple Case-Insensitive Search
When working with dynamic data tables, allowing users to search and filter
content in real time can greatly enhance usability. With jQuery, you can
easily implement a case-insensitive search that filters table rows as the
user types.
Let’s walk through how this works with a practical example.
Live Table Search Using jQuery
Imagine you have a table that lists user information—first name, last name,
and email. You want users to be able to type into a search box and instantly
filter the visible rows.
Here’s how you can do it:
Demo Structure:
<input id="myInput" type="text" placeholder="Search...">
<table id="myTable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r@test.com</td>
</tr>
</table>
jQuery Logic:
<script>
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase(); // Get input and
convert to lowercase
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
</script>
How It Works
- Listening to User Input: The keyup event is triggered whenever the user types something in the input field.
- Standardizing Case: Both the search input and table text are converted to lowercase using .toLowerCase() to make the search case-insensitive.
- Filtering Rows: The filter() function checks each row to see if it contains the typed value. If it doesn't, toggle(false) hides the row. If it does, toggle(true) keeps it visible.
So whether a user types “john”, “John”, or “JOHN”, they’ll still see the
matching entry.
How to Filter List Items with jQuery (Case-Insensitive Search)
Want to make long lists easier to navigate? With just a few lines of
jQuery, you can add a real-time, case-insensitive search feature to filter
list items as the user types.
Let’s walk through a simple example.
Live List Search with jQuery
Suppose you have an unordered list of items, and you want users to be
able to search through them by typing into a text field. Here’s a basic
implementation:
HTML Structure:
<input id="myInput" type="text" placeholder="Search...">
<ul id="myList">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
jQuery Script:
<script>
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
</script>
How It Works
- Input Detection: The script listens for keyup events on the input field.
- Text Matching: It compares the lowercase version of the input against each list item’s text.
- Showing/Hiding Items: If a list item contains the typed value, it stays visible. Otherwise, it’s hidden using toggle().
This allows for a smooth, real-time search experience, regardless of the
letter case—“first”, “FIRST”, or “First” will all return the same
result.
How to Filter Any Text Content Inside a div Using jQuery
Filtering lists and tables is common—but what if you want to filter
anything? Whether it's paragraphs, buttons, or other HTML elements, jQuery
makes it easy to perform a case-insensitive search across all types of
content inside a container.
Let’s look at a simple example where we filter various elements inside a
<div> based on user input.
HTML Example: Filter Mixed Content
<input id="myInput" type="text" placeholder="Search...">
<div id="myContainer">
<p>I am a paragraph.</p>
<div>I am a div element inside div.</div>
<button>I am a button</button>
<button>Another button</button>
<p>Another paragraph.</p>
</div>
jQuery Script to Filter Content:
<script>
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myContainer *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
</script>
How It Works
- Targeting All Elements: The selector #myContainer * applies the filter to every element inside the container—paragraphs, divs, buttons, etc.
- Case-Insensitive Match: By converting both the input and element text to lowercase using .toLowerCase(), the search becomes case-insensitive.
- Dynamic Visibility: The toggle() method shows or hides elements based on whether the text content includes the typed search term.
So, typing "button", "Paragraph", or "div" will instantly filter and
display only the matching elements.
More topic in jQuery
