使用jQuery过滤mySQL查询结果

我已经成功设置了我的表来反馈MySQL Query中的所有结果。我期望能够使用每个按键上触发的搜索字段来过滤我的结果，但无法找到任何操纵我用来显示数据的方法的示例。使用jQuery过滤mySQL查询结果

见下面我的代码，

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
<title>ProSys Component Lookup</title> 
</head> 

<body> 

<div class="container"> 
<div class="col-md-12"> 
    <div class="col-md-12"> 
    <div class="page-header"> 
     <h1>ProSys Component Lookup</h1> 
    </div> 
    <div class="col-md-6 search"> 
     <form class="styled"> 
     <fieldset> 
      <input type="text" placeholder="Search.."> 
     </form> 
    </div> 
    <div class="col-md-6"> 

    </div> 
    <div class="panel"> 
     <div class="panel-body"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <table class="table table-striped" id="myTable"> 
      <thead> 
       <tr> 
       <th>Location</th> 
       <th>Manufacturer</th> 
       <th>Description</th> 
       <th>PackageSize</th> 
       <th>Supplier</th> 
       <th>SupplierNumber</th> 
       </tr> 
      </thead> 
       <tbody> 
       <tr> 
       <?php 
       include("DBConfig.php"); 

       $result = mysql_query("SELECT DrawLocation, Manufacturer, Description, PackageSize, Supplier, SupplierNumber FROM complibrary"); 

       while($complibrary = mysql_fetch_array($result)) 
       { 
        echo"<td>".$complibrary['DrawLocation']."</td>"; 
        echo"<td>".$complibrary['Manufacturer']."</td>"; 
        echo"<td>".$complibrary['Description']."</td>"; 
        echo"<td>".$complibrary['PackageSize']."</td>"; 
        echo"<td>".$complibrary['Supplier']."</td>"; 
        echo"<td>".$complibrary['SupplierNumber']; 
        echo "</tr>"; 
       } 
       mysql_close($conn); 
       ?> 
      </table> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

任何想法？我基本上在寻找一种方法来过滤从我的查询中反馈的标签。

编辑：设法找到一种方法来使这项工作，但它只搜索第一列。是否可以使用输入中的参数outset在所有列上进行搜索？

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
<!-- Latest jQuery --> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<title>ProSys Component Lookup</title> 
</head> 

<body> 

<div class="container"> 
<div class="col-md-12"> 
    <div class="col-md-12"> 
    <div class="page-header"> 
     <h1>ProSys Component Lookup</h1> 
    </div> 
    <div class="col-md-6 search"> 
     <form class="styled"> 
     <fieldset> 
      <input type="text" onkeyup="myFunction()" id="myInput" placeholder="Search.."> 
     </form> 
    </div> 
    <div class="col-md-6"> 

    </div> 
    <div class="panel"> 
     <div class="panel-body"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <table class="table table-striped"> 
      <thead> 
       <tr> 
       <th>Location</th> 
       <th>Manufacturer</th> 
       <th>Description</th> 
       <th>PackageSize</th> 
       <th>Supplier</th> 
       <th>SupplierNumber</th> 
       </tr> 
      </thead> 
       <tbody id="myTable"> 
       <tr> 
       <?php 
       include("DBConfig.php"); 

       $result = mysql_query("SELECT DrawLocation, Manufacturer, Description, PackageSize, Supplier, SupplierNumber FROM complibrary"); 

       while($complibrary = mysql_fetch_array($result)) 
       { 
        echo"<td>".$complibrary['DrawLocation']."</td>"; 
        echo"<td>".$complibrary['Manufacturer']."</td>"; 
        echo"<td>".$complibrary['Description']."</td>"; 
        echo"<td>".$complibrary['PackageSize']."</td>"; 
        echo"<td>".$complibrary['Supplier']."</td>"; 
        echo"<td>".$complibrary['SupplierNumber']."</td>"; 
        echo "</tr>"; 
       } 
       mysql_close($conn); 
       ?> 
      </table> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

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

</body> 
</html>

来源

2017-06-19 Tom Algar

你需要看看jQuery#Autocomplete API。那里有几个例子。

来源

2017-06-19 13:59:03 Ravi

对不起，我应该在我的文章中更好地解释。我的查询显示了我需要的字段中的表格中的所有内容，但我希望能够从此实时筛选出来。与此功能类似：http://lookup.tachosys.com/ –

是的，它的工作原理与我指出的一样。你需要让你相应地执行。 – Ravi

使用jQuery过滤mySQL查询结果​​

回答

相关问题

使用jQuery过滤mySQL查询结果