使用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查詢結果