W3.CSS Filters
Filter HTML Elements
With a little JavaScript, you can filter W3.CSS tables, lists, dropdowns, and other content.
The examples below filter elements as the user types in an input field.
Filter Tables
Use JavaScript to hide table rows that do not match the text entered in an input field:
Example
| Name | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
Filter Lists
The same technique can be used to filter list items:
Filter Dropdowns
You can also filter links inside a dropdown.
The JavaScript reads the text in the input field and hides links that do not match.
Modern Filter Pattern
The basic pattern is:
Example
const filter = input.value.toLowerCase();
items.forEach(item => {
item.style.display =
item.textContent.toLowerCase().includes(filter)
? "" : "none";
});
The includes() method checks whether the text contains the search value.
The textContent property reads the visible text without treating it as HTML.
