How can I filter a generated list from a query from PHP in JS?

I have a list of files from my database. I’m looking for a way to query them. but I’m receiving an error, which is… it only display the first item if my input matches the first. This is the form

<form>
    <input type="text" placeholder="Filter" aria-label="Search"
           onkeyup="myFunction()" id="myInput">
</form>

below is the php

<?php
  $query = "SELECT classname,cdate FROM classnametb`";
  $res = mysqli_query($db, $query);
  while ($r = mysqli_fetch_assoc($res)){
  $classname = $r['classname'];
  $classdate = $r['cdate'];
  $classdate = date("m/d/y", strtotime($classdate));
?>
<div id="myUL">
  <b>
    <a href="studentclass.php?course=<?php echo($classname); ?>&&cdate=<?php echo($classdate); ?>"
       class="btn btn-primary btn-icon" style="width: 20% !important;">
      <span class="btn-inner--text"><?php echo($classname . '(' . $classdate . ')'); ?></span>

    </a>
    <?php } ?>
  </b>
</div>

and I have the js here

    function myFunction() {
        var input, filter, div, b, a, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        div= document.getElementById("myUL");
        b = div.getElementsByTagName("b");
        for (i = 0; i < b.length; i++) {
            a = b[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                b[i].style.display = "";
            } else {
                b[i].style.display = "none";
            }
        }
    }

Answer

You are generating mutliple myUl divs inside while loop and you have not close </b> & </div> .Instead change your php code like below :

<div id="myUL"> <!--add opening tag here-->
<?php
  $query = "SELECT classname,cdate FROM classnametb`";
  $res = mysqli_query($db, $query);
  while ($r = mysqli_fetch_assoc($res)){
  //some codes..
?>
  <b>
    <a href="studentclass.php?course=<?php echo($classname); ?>&&cdate=<?php echo($classdate); ?>"
       class="btn btn-primary btn-icon" style="width: 20% !important;">
      <span class="btn-inner--text"><?php echo($classname . '(' . $classdate . ')'); ?></span>

    </a>
  </b> <!--close `b` tag-->
<?php } ?>
</div> <!--close `div` tag-->

Now, you can simply your js code by using .forEach to iterate through your b tag and hide/show it when match found.

Demo Code (Added comment in code) :

function myFunction() {
  var input, filter;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  //loop through `b` tag 
  document.querySelectorAll('#myUL b').forEach(function(el) {
    el.style.display = 'none'; // hide it
  });
  //loop through div -> `a` tag
  document.querySelectorAll('#myUL a.btn-icon').forEach(function(el) {
    //compare 
    if (el.textContent.toUpperCase().indexOf(filter) > -1) {
      el.closest('b').style.display = "block"; //if match show that div
    }
  })
}

b {
  display: block
}

<input type="text" placeholder="Filter" aria-label="Search" onkeyup="myFunction()" id="myInput">
<div id="myUL">
  <b>
     <a href="studentclass.php?course=<?php echo($classname); ?>&&cdate=<?php echo($classdate); ?>"
       class="btn btn-primary btn-icon" style="width: 20% !important;">
      <span class="btn-inner--text">abc</span>

    </a>   
  </b>
  <b>
     <a href="studentclass.php?course=<?php echo($classname); ?>&&cdate=<?php echo($classdate); ?>"
       class="btn btn-primary btn-icon" style="width: 20% !important;">
      <span class="btn-inner--text">abc13</span>

    </a>   
  </b>
  <b>
     <a href="studentclass.php?course=<?php echo($classname); ?>&&cdate=<?php echo($classdate); ?>"
       class="btn btn-primary btn-icon" style="width: 20% !important;">
      <span class="btn-inner--text">assee</span>

    </a>   
  </b>
  <b>
     <a href="studentclass.php?course=<?php echo($classname); ?>&&cdate=<?php echo($classdate); ?>"
       class="btn btn-primary btn-icon" style="width: 20% !important;">
      <span class="btn-inner--text">apple</span>

    </a>   
  </b>
</div>

Advertisement

Answer