JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<label>Search: <input type="search" value="giant"></label>

<table>
  <tbody>
    <tr><th>1</th><td>Aardvark</td></tr>
    <tr><th>2</th><td>Abyssinian</td></tr>
    <tr><th>3</th><td>Adelie Penguin</td></tr>
    <tr><th>4</th><td>Affenpinscher</td></tr>
    <tr><th>5</th><td>Afghan Hound</td></tr>
    <tr><th>6</th><td>African Bush Elephant</td></tr>
    <tr><th>7</th><td>African Civet</td></tr>
    <tr><th>8</th><td>African Clawed Frog</td></tr>
    <tr><th>9</th><td>African Forest Elephant</td></tr>
    <tr><th>10</th><td>African Palm Civet</td></tr>
    <tr><th>11</th><td>African Penguin</td></tr>
    <tr><th>12</th><td>African Tree Toad</td></tr>
    <tr><th>13</th><td>African Wild Dog</td></tr>
    <tr><th>14</th><td>Ainu Dog</td></tr>
    <tr><th>15</th><td>Airedale Terrier</td></tr>
    <tr><th>16</th><td>Akbash</td></tr>
    <tr><th>17</th><td>Akita</td></tr>
    <tr><th>18</th><td>Alaskan Malamute</td></tr>
    <tr><th>19</th><td>Albatross</td></tr>
    <tr><th>20</th><td>Aldabra Giant Tortoise</td></tr>
    <tr><th>21</th><td>Alligator</td></tr>
    <tr><th>22</th><td>Alpine Dachsbracke</td></tr>
    <tr><th>23</th><td>American Bulldog</td></tr>
    <tr><th>24</th><td>American Cocker Spaniel</td></tr>
    <tr><th>25</th><td>American Coonhound</td></tr>
    <tr><th>26</th><td>American Eskimo Dog</td></tr>
    <tr><th>27</th><td>American Foxhound</td></tr>
    <tr><th>28</th><td>American Pit Bull Terrier</td></tr>
    <tr><th>29</th><td>American Staffordshire Terrier</td></tr>
    <tr><th>30</th><td>American Water Spaniel</td></tr>
    <tr><th>31</th><td>Anatolian Shepherd Dog</td></tr>
    <tr><th>32</th><td>Angelfish</td></tr>
    <tr><th>33</th><td>Ant</td></tr>
    <tr><th>34</th><td>Anteater</td></tr>
    <tr><th>35</th><td>Antelope</td></tr>
    <tr><th>36</th><td>Appenzeller Dog</td></tr>
    <tr><th>37</th><td>Arctic Fox</td></tr>
    <tr><th>38</th><td>Arctic Hare</td></tr>
    <tr><th>39</th><td>Arctic Wolf</td></tr>
   ...

JavaScript

function filterItems(searchValue) {
  const itemsArr = [...document.querySelectorAll('tbody tr')];
  const lowerCaseSearchValue = searchValue.trim().toLowerCase();
  
  let i = 0;
  for (let ele of itemsArr) {
    const lowerCaseTableValue = ele.querySelector('td').innerText.toLowerCase();

    if (!lowerCaseSearchValue || lowerCaseTableValue.match(lowerCaseSearchValue)) {
      ele.style.display = 'table-row';
    } else {
      ele.style.display = 'none';
    }
  }
}

const searchInput = document.querySelector('input[type=search]');

searchInput.addEventListener('input', evt => filterItems(evt.target.value));

filterItems(searchInput.value);