W3.JS

W3.JS HTML Filters

Filter elements:

w3.filterHTML( selector)

Filter Lists

Search for a name in the input field.

{{CustomerName}}

Example

<input oninput="w3.filterHTML('#id01', 'li', this.value)">

<ul id="id01">
<li>Alfreds Futterkiste</li>
<li>Berglunds snabbkop</li>
...

Try It Yourself » With CSS »

Filter Tables

Name	Country
Berglunds snabbköp	Sweden
North/South	UK
Alfreds Futterkiste	Germany
Königlich Essen	Germany
Magazzini Alimentari Riuniti	Italy
Paris spécialités	France
Island Trading	UK
Laughing Bacchus Winecellars	Canada

Example

<input oninput="w3.filterHTML('#id01', '.item', this.value)">

<table id="id01">
<tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
</tr>
<tr class="item">
    <td>Alfreds Futterkiste</td>
    <td>Berlin</td>
    <td>Germany</td>
</tr>
<tr class="item">
    <td>Berglunds snabbkop</td>
    <td>Lulea</td>
    <td>Sweden</td>
</tr>
...

Try It Yourself » With CSS »

❮ Previous Next ❯