Search bar to find rows in several accordions

function testSearch(){ console.log("testresearch") let input = document.getElementById('searchbar').value input=input.toLowerCase(); let x = document.getElementsByClassName('panel'); for (i = 0; i < x.length; i++) { if (!x[i].innerHTML.toLowerCase().includes(input)) { x[i].style.display="none"; } else { x[i].style.display="list-item"; } } }

//  use this
let x = document.querySelectorAll('td');           //  select all <td> tags
//  instead
let x = document.getElementsByClassName('panel'); //  select first <div class="panel"> tag

Below full code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled</title>
</head>

<body>
    <input id="searchbar" onkeyup="testSearch()" type="text" name="search" placeholder="..." autocomplete=false/><br />
    <button class="accordion button is-light">A</button>
    <div class="panel" style="">
        <table class="dataframe table is-hoverable is-fullwidth clickable-table">
            <tbody>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                </tr>
            </tbody>
        </table>
    </div>

    <button class="accordion button is-light">B</button>
    <div class="panel" style="">
        <table class="dataframe table is-hoverable is-fullwidth clickable-table">
            <tbody>
                <tr>
                    <td>D</td>
                    <td>E</td>
                    <td>F</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        function testSearch() {
            console.log("testresearch")
            let input = document.getElementById('searchbar').value
            input = input.toLowerCase();
            // let x = document.getElementsByClassName('panel');
            let x = document.querySelectorAll('td');    //  select all <td> tags instead of div.panel tag
            for (i = 0; i < x.length; i++) {            //  for loop
                if (!x[i].innerHTML.toLowerCase().includes(input)) {
                    x[i].style.display = "none";
                    x[i].style.background = "white";    //  setting background style to normal color
                }
                else if(input<=0){                      //  if input is empty
                    x[i].style.display = "initial";     //  set style to normal default
                    x[i].style.background = "white";    //  background to normal
                }
                else {                                  //  if input contains value that matches <td> value
                    x[i].style.display = "initial";     //  set style to normal default
                    x[i].style.background = "yellow";   //  set background color to YELLOW as same color of highlighted text
                }
            }

        }
    </script>
</body>

</html>

Recommended topics

Hot tags