title: PHP and HTML table search using javascript
body: <p>I want to create a search box, that only displays matched entries as search phrases are typed; the same in function as described here:</p>
  
  <p><a href="https://stackoverflow.com/questions/9127498/how-to-perform-a-real-time-search-and-filter-on-a-html-table">How to perform a real time search and filter on a HTML table</a></p>
  
  <p>The difference is, the table I have is created from a PHP loop - and SQL data.  But, I am unsure how to adopt the code to work for me.</p>
  
  <p>Personally, I think it could be related to the "// printing table rows" section.</p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $search_rows = $('#table tr');
  $('#search').keyup(function() {
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
  
      $search_rows.show().filter(function() {
          var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
          return !~text.indexOf(val);
      }).hide();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;script src="./jquery-1.6.4.js"&gt;&lt;/script&gt;
  &lt;script src="./sorttable.js"&gt;&lt;/script&gt;
  &lt;script src="./searchbox.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="styles.css"&gt;
  
  &lt;head&gt;
  &lt;title&gt;Tau Empire Cadre Census&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;?php
  
  
  //// //// //// ////
  // DATABASE
  //// //// //// ////
  
  //database credentials
  $db_host="localhost";
  $db_user="tau";
  $db_pwd="kuhohNg3";
  $db="tau_census";
  $db_table="cadres";
  
  //make the connection
  if (!mysql_connect($db_host, $db_user, $db_pwd))
      die("Can't connect to database");
  
  if (!mysql_select_db($db))
      die("Can't select database");
  
  // sending query
  $result = mysql_query("SELECT * FROM {$db_table}");
  if (!$result) {
      die("Query to show fields from table failed");
  }
  
  //assign a variable the number of returned table fields
  $fields_num = mysql_num_fields($result);
  
  
  //// //// //// ////
  // HEADING
  //// //// //// ////
  
  echo "&lt;h1&gt;Tau Empire Cadre Census&lt;/h1&gt;";
  // Search box
  echo '&lt;input type="text" id="search" placeholder="Type to search"&gt;';
  
  
  //// //// //// ////
  // TABLE
  //// //// //// ////
  
  //create the table, and use the JS sortable script
  echo '&lt;table id="table" class="sortable"&gt;&lt;tr&gt;';
  
  // printing table headers
  echo "&lt;td class=headings&gt;Designation&lt;/td&gt;";
  echo "&lt;td class=headings&gt;Location&lt;/td&gt;";
  echo "&lt;td class=headings&gt;Founding&lt;/td&gt;";
  echo "&lt;td class=headings&gt;Commanding Officer&lt;/td&gt;";
  echo "&lt;td class=headings&gt;Current Status&lt;/td&gt;";
  echo "&lt;td class=headings&gt;Current Location&lt;/td&gt;";
  echo "&lt;td class=headings&gt;Mission&lt;/td&gt;";
  
  echo "&lt;/tr&gt;\n";
  
  // printing table rows
  while($row = mysql_fetch_row($result))
  {
      echo "&lt;tr&gt;";
      // For each field print the content
      for($i=1; $i&lt;$fields_num; $i++) {
          echo "&lt;td&gt;" . $row[$i] . "&lt;/td&gt;";
      }
      echo "&lt;/tr&gt;";
  }
  
  echo "&lt;/table&gt;";
  
  mysql_free_result($result);
  
  ?&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Running this does not throw up any errors, but nor does it work either.  This requires brains greater than mine to work out, please.</p>