Loading Please Wait...
Use jQuery to filter/search for specific elements.
Perform a case-insensitive search for items in a table:
Type something in the input field to search the table for first names, last names or emails:
| Name | |
|---|---|
| John Doe | john@gmail.com |
| Ram Kumar | ramkumar@gmail.com |
| Devid | devid@gmail.com |
$(document).ready(function(){
$("#tableSearchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle() method hides the row (display:none) that does not match the search. We use the toLowerCase() DOM method to convert the text to lower case, which makes the search case insensitive (allows "john", "John", and even "JOHN" on search).
Perform a case-insensitive search for items in a list:
Type something in the input field to search the list for items:
$(document).ready(function(){
$("#listSearchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Perform a case-insensitive search for text inside a div element:
Type something in the input field to search the <div> element:
I am a paragraph.
Another paragraph.
$(document).ready(function(){
$("#divSearchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myDIV *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved