Question

I have managed to set up my table to feedback all of my results from a MySQL Query. I am looking to be able to filter my results using a search field that triggers on each keypress, but cannot find any examples that manipulate the method i'm using to display the data.

See my code below,

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

Any ideas? I'm essentially looking for a way to filter the tags fed back from my query.

EDIT: Have managed to find a way to make this work, but it only searches the first column. Is it possible to make this search across all columns using the parameter outset in the input?

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

Answer 1

You need to look at jQuery#Autocomplete API . There are couple examples available there.

Filter mySQL query results in table by using jQuery?

1 个答案: