更新

Question

我已经开发了一个代码来获取数据库结果。

现在，我需要过滤使用Java脚本实时过滤方法结果。但是过滤部分没有成功。

有人可以帮我弄清楚吗？

代码：

    <div class="col-lg-8" >
  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
  <center><h3>Wasthu</h3></center>
  <?php
    $sql = "SELECT * FROM services  where service='Architecture'";
    $result = $con->query($sql);
    if ($result->num_rows > 0) 
    {
    while ($row = $result->fetch_assoc()) 
      {
    ?>
  <div class="col-lg-3" style="border: outset;">
    <div class="header">
        <?php echo '<img src="' . $row['image_path4']. '" width="100" height="100">'; ?>
    </div>
    <ul class="body" id="myUL">
    <li>
      <a href="www.google.com" target="_blank">
        <?php echo $row ['name']; ?>
      </a>
      <i class="fa fa-envelope-square"><?php echo $row ['email']; ?></i>
      <br>
      <i class="fa fa-address-book"><?php echo $row ['address']; ?></i>
      <br>
      <?php echo $row ['years']; ?>
      <br>
      <i class="fa fa-info"><?php echo $row ['details']; ?></i>
      <div style="background-color: #000000">
        <font color="#FFFFFF"><?php echo $row ['district']; ?></font>
        <font color="#FFFFFF"><?php echo $row ['city']; ?></font>
      </div>
    </li>
</ul>
</div>
  <?php
      }
    } 
    else 
    {
      echo "0 results";
    }
    $con->close();
  ?>

</div>

<script>
  function myFunction() 
  {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) 
    {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) 
        {
          li[i].style.display = "";
        } 
        else 
        {
          li[i].style.display = "none";
        }
    }
  }
</script>

下面给出的图像显示了过滤之前数据库获取的结果

此图显示了搜索时所需结果如何消失。在这里我想搜索sadeepa。当我搜索它时，它消失了

Answer 1

#myUL元素不是UL而是DIV-其子元素不是LI元素而是H4。而且您没有A标签。

要么更改HTML中的标签名称，要么修改JavaScript函数以查找正确的标签。

<div class="col-lg-8" >
  <input type="text" 
    id="myInput" 
    onkeyup="myFunction()" 
    placeholder="Search for names.." 
    title="Type in a name">
  <center><h3>Wasthu</h3></center>
  <?php
    $sql = "SELECT * FROM services  where service='Waasthu'";
    $result = $con->query($sql);
    if ($result->num_rows > 0) 
    {
  ?>
  <div class="col-lg-3" style="border: outset;">
  <div class="header">
    <?php echo '<img src="' . $row['image_path4']. '" width="100" height="100">'; ?>
  </div>
  <ul class="body" id="myUL">
  <?php
      while ($row = $result->fetch_assoc()) 
      {
  ?>
    <li>
      <a href="www.google.com" target="_blank">
        <?php echo $row ['name']; ?>
      </a>
      <i class="fa fa-envelope-square"><?php echo $row ['email']; ?></i>
      <br>
      <i class="fa fa-address-book"><?php echo $row ['address']; ?></i>
      <br>
      <?php echo $row ['years']; ?>
      <br>
      <i class="fa fa-info"><?php echo $row ['details']; ?></i>
      <div style="background-color: #000000">
        <font color="#FFFFFF"><?php echo $row ['district']; ?></font>
        <font color="#FFFFFF"><?php echo $row ['city']; ?></font>
      </div>
    </li>
  <?php
      }
    } 
    else 
    {
      echo "0 results";
    }
    $con->close();
  ?>
</div>

<script>
  function myFunction() 
  {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) 
    {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) 
        {
          li[i].style.display = "";
        } 
        else 
        {
          li[i].style.display = "none";
        }
    }
  }
</script>

更新

该示例正常工作-试试吧。

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

<div class="col-lg-8" >
  <input type="text" 
    id="myInput" 
    onkeyup="myFunction()" 
    placeholder="Search for names.." 
    title="Type in a name">
  <center><h3>Wasthu</h3></center>
  <div class="col-lg-3" style="border: outset;">
  <div class="header">
    <img src="http://randomavatar.com/avatar/50270" width="100" height="100">
  </div>
  <ul class="body" id="myUL">
    <li>
      <a href="www.google.com" target="_blank">
        Peter Goodyear
      </a>
      <i class="fa fa-envelope-square">peter@gmail.com</i>
      <br>
      <i class="fa fa-address-book">London city</i>
      <br>
      35 yrs
      <br>
      <i class="fa fa-info">Some details</i>
      <div style="background-color: #000000">
        <font color="#FFFFFF">District 5</font>
        <font color="#FFFFFF">London</font>
      </div>
    </li>
    <li>
      <a href="www.google.com" target="_blank">
        Sara Bullock
      </a>
      <i class="fa fa-envelope-square">sara@gmail.com</i>
      <br>
      <i class="fa fa-address-book">Alabama city</i>
      <br>
      35 yrs
      <br>
      <i class="fa fa-info">Some details</i>
      <div style="background-color: #000000">
        <font color="#FFFFFF">District 5</font>
        <font color="#FFFFFF">Alabama</font>
      </div>
    </li>
    <li>
      <a href="www.google.com" target="_blank">
        Mark Meyerson
      </a>
      <i class="fa fa-envelope-square">mark@gmail.com</i>
      <br>
      <i class="fa fa-address-book">New York city</i>
      <br>
      35 yrs
      <br>
      <i class="fa fa-info">Some details</i>
      <div style="background-color: #000000">
        <font color="#FFFFFF">District 5</font>
        <font color="#FFFFFF">New York</font>
      </div>
    </li>
    <li>
      <a href="www.google.com" target="_blank">
        Robert Stone
      </a>
      <i class="fa fa-envelope-square">robert@gmail.com</i>
      <br>
      <i class="fa fa-address-book">Dallas city</i>
      <br>
      35 yrs
      <br>
      <i class="fa fa-info">Some details</i>
      <div style="background-color: #000000">
        <font color="#FFFFFF">District 5</font>
        <font color="#FFFFFF">Dallas</font>
      </div>
    </li>
  
</div>

如何使用Java脚本实时过滤方法过滤数据库获取的值？

1 个答案:

更新