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

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

javascript php

Javascript 如何使用java脚本实时过滤方法过滤数据库获取的值？,javascript,php,Javascript,Php,我开发了一个获取数据库结果的代码现在，我需要使用java脚本实时过滤方法对数据库的结果进行过滤。但是过滤部分没有成功有人能帮我弄清楚吗代码： <div class="col-lg-8" > <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <center><h3

我开发了一个获取数据库结果的代码

现在，我需要使用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>


瓦斯托










函数myFunction（）
{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）
{
李[i].style.display=“”；
} 
其他的
{
li[i].style.display=“无”；
}
}
}

下图显示了筛选前数据库获取的结果

此图显示搜索时所需结果如何消失。这里我想搜索sadeepa，当我搜索它时，它消失了元素不是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>


瓦斯托









函数myFunction（）
{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）
{
李[i].style.display=“”；
} 
其他的
{
li[i].style.display=“无”；
}
}
}

更新这个例子很好用——试试看

函数myFunction（）
{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）
{
李[i].style.display=“”；
} 
其他的
{
li[i].style.display=“无”；
}
}
}


瓦斯托


peter@gmail.com


伦敦城


35岁


一些细节
第五区
伦敦


sara@gmail.com


阿拉巴马市


35岁


一些细节
第五区
阿拉巴马州


mark@gmail.com


纽约市


35岁


一些细节
第五区
纽约


robert@gmail.com


达拉斯市


35岁


一些细节
第五区
达拉斯

元素不是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>


瓦斯托









函数myFunction（）
{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）
{
李[i].style.display=“”；
} 
其他的
{
li[i].style.display=“无”；
}
}
}

更新
这个例子很好用——试试看

函数myFunction（）
{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）
{
李[i].style.display=“”；
} 
其他的
{
li[i].style.display=“无”；
}
}
}

瓦斯托


peter@gmail.com


伦敦城


35岁


一些细节
第五区
伦敦


sara@gmail.com


阿拉巴马市


35岁


一些细节
第五区
阿拉巴马州


mark@gmail.com


纽约市


35岁


一些细节
第五区
纽约


robert@gmail.com


达拉斯市


35岁


一些细节
第五区
达拉斯

I