Here are one HTML Table element and one input text field for searching. Also, we used Bootstrap 4 to create a page layout. In the table element, we added some sample data. You can search by customer id, name, email, postal code, and country.
HTML table simply made with
<td> based. In this table, we added one class
customers-list that will mapping with a search field. You can see we added attribute
data-table="customers-list" to filter on
forEach loop. Thus we can archive this table filter functionality with lightweight code.
We hope you have found this article helpful. Let us know your questions or feedback if any through the comment section in below. You can subscribe our newsletter and get notified when we publish new WordPress articles for free. Moreover, you can explore here other interesting articles.
If you like our article, please consider buying a coffee for us.
Thanks for your support!
Buy me a coffee!
10 Responses Leave a Comment
This is great!
I was wondering, do you know any chance how to have the table not show on load and when we clear the search in the input it will also clear? Thanks!!
Yes, when input is empty you can hide table.
Please This is wonderful script, please help to add hide table when search is empty and also please help to add button
Nice but It doesn’t works on blogger template. Can We Expect to get same filter table code which works on Blogger Blog.
How to copy table items in plain text?
Sometimes copying text from the table and directly pasting in password boxes on other websites is not working until we paste the text from table somewhere else and then copy again from the new place.
Very nice filter indeed.
+1 to the question on how to hide the table on load while showing results when using the input field. I’ve tried
row.style.display = text_content.indexOf(search_val) > -1 ? ‘none’ : ”;
row.style.display = text_content.indexOf(search_val) > -1 ? ” : ‘none’;
but without luck.
Very well done!!!!
Is there an easy fix to also highlight the search hits, or is this a bigger task?
Perfectly done, thanks a lot !