时间戳

首页 > 解决方案 > 如何从 JS 中的 PHP 查询中过滤生成的列表？

javascript - 如何从 JS 中的 PHP 查询中过滤生成的列表？

问题描述

我有一个来自我的数据库的文件列表。我正在寻找一种方法来查询它们。但我收到一个错误，即......如果我的输入与第一项匹配，它只会显示第一项。这是表格

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

下面是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>

我这里有js

    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";
            }
        }
    }

标签： javascriptphphtml

解决方案

您myUl在 while 循环中生成了多个 div，并且您没有关闭</b>& 。</div>而是更改您的 php 代码，如下所示：

<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-->

现在，您可以简单地使用 js 代码.forEach遍历您的b标签并在找到匹配项时隐藏/显示它。

演示代码（在代码中添加注释）：

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>

推荐阅读