title: Live search table with PHP and ajax
body: <p>i'm making an html table that pulls from a database and displays the entries, with a live search function. everything seems to be in place correctly as far as i can tell, but the table doesn't populate at all, and the search doesn't work.</p>
  
  <p>here is the search function php page:</p>
  
  <pre><code>&lt;?php
  
      require_once '../../php/db.php';
  
      // Output HTML formats
      $html = '&lt;tr&gt;';
      $html .= '&lt;td class="small"&gt;dNameString&lt;/td&gt;';
      $html .= '&lt;td class="small"&gt;phoneString&lt;/td&gt;';
      $html .= '&lt;td class="small"&gt;companyString&lt;/td&gt;';
      $html .= '&lt;td class="small"&gt;billingString&lt;/td&gt;';
      $html .= '&lt;/tr&gt;';
  
      //Get the search
      $search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
      $search_string = $conn-&gt;real_escape_string($search_string);
  
      // Check if length is more than 1 character
      if (strlen($search_string) &gt;= 1 &amp;&amp; $search_string !== ' ') {
  
           //Insert Time Stamp for complete searches
          $time = "UPDATE query_data SET timestamp=now() WHERE name='" .$search_string. "'";
  
          //Count how many times a query occurs 
          $query_count = "UPDATE query_data SET querycount = querycount +1 WHERE name='" .$search_string. "'";
  
          //Query
          $query = 'SELECT * FROM customers WHERE clientDisplayName LIKE "%'.$search_string.'%"';
  
          //Timestamp entry of search for later display
          $time_entry = $conn-&gt;query($time);
  
          //Count how many times a query occurs
          $query_count = $conn-&gt;query($query_count);
  
          // Do the search
          $result = $conn-&gt;query($query);
          while($results = $result-&gt;fetch_array()) {
              $result_array[] = $results;
          }
  
           // Check for results
          if (isset($result_array)) {
              foreach ($result_array as $result) {
                  // Output strings and highlight the matches
                  $d_name = preg_replace("/".$search_string."/i", "&lt;b&gt;".$search_string."&lt;/b&gt;", $result['clientDisplayName']);
                  $d_phone = $result['clientPhNumber'];
                  $d_comp = $result['clientCompanyName'];
                  $d_street = $result['clientBillingStreet'];
  
                  // Replace the items into above HTML
                  $o = str_replace('dNameString', $d_name, $html);
                  $o = str_replace('phoneString', $d_phone, $o);
                  $o = str_replace('companyString', $d_comp, $o);
                  $o = str_replace('billingString', $d_street, $o);
  
                  // Output it
                  echo($o);
              }
          } else {
               // Replace for no results
               $o = str_replace('dNameString', '&lt;span class="label label-danger"&gt;No Names Found&lt;/span&gt;', $html);
               $o = str_replace('phoneString', '', $o);
               $o = str_replace('companyString', '', $o);
               $o = str_replace('billingString', '', $o);
  
               // Output
               echo($o);
          }
  
      }
  
  ?&gt;
  </code></pre>
  
  <p>Here is my javascript code:</p>
  
  <pre><code>$(document).ready(function() {  
  
  $(".tablesearch").hide();
  // Search
  function search() {
      var query_value = $('input#clientDisplayName').val();
      if(query_value !== ''){
          $.ajax({
              type: "POST",
              url: "../php/search.php",
              data: { query: query_value },
              cache: false,
              success: function(html){
                  $("table#resultTable tbody").html(html);
              }
          });
      }return false;    
  }
  
  $("input#clientDisplayName").live("keyup", function(e) {
      // Set Timeout
      clearTimeout($.data(this, 'timer'));
  
      // Set Search String
      var search_string = $(this).val();
  
      // Do Search
      if (search_string == '') {
          $(".tablesearch").fadeOut(300);
      }else{
          $(".tablesearch").fadeIn(300);
          $(this).data('timer', setTimeout(search, 100));
      };
  });
  
  });
  </code></pre>
  
  <p>And here is the actual table in html:</p>
  
  <pre><code>        &lt;div class="row"&gt;
              &lt;div class="col-xs-12 col-sm-4 col-md-3 col-lg-3"&gt;
              &lt;p&gt;Type a name to begin searching&lt;/p&gt;
                      &lt;form class="form-horizontal" name="search" role="form" method="POST" onkeypress="return event.keyCode != 13;"&gt;
                          &lt;div class="input-group col-sm-11"&gt;
                              &lt;input id="name" name="name" type="text" class="form-control" placeholder="Search by name..." autocomplete="off"/&gt;
                              &lt;span class="input-group-btn"&gt;
                                  &lt;button type="button" class="btn btn-default btnSearch"&gt;
                                      &lt;span class="glyphicon glyphicon-search"&gt; &lt;/span&gt;
                                  &lt;/button&gt; &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="row mt"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="content-panel tablesearch"&gt;
  
                      &lt;section id="unseen"&gt;
                          &lt;table id="resultTable" class="table table-bordered table-hover table-condensed"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
  
                                      &lt;th class="small"&gt;Name&lt;/th&gt;
                                      &lt;th class="small"&gt;Phone&lt;/th&gt;
                                      &lt;th class="small"&gt;Company&lt;/th&gt;
                                      &lt;th class="small"&gt;Address&lt;/th&gt;
  
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
  
                              &lt;tbody&gt;&lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/section&gt;
  
                  &lt;/div&gt;&lt;!-- /content-panel --&gt;
              &lt;/div&gt;&lt;!-- /col-lg-4 --&gt;
          &lt;/div&gt;&lt;!-- /row --&gt;
  
  
          &lt;div class="row mt"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;h3&gt;Top Searches&lt;/h3&gt;
                  &lt;p&gt;These results are ranked by popularity in the query_data table. Each time the complete name is entered in the search, a +1 is registered and incremented.&lt;/p&gt;
                  &lt;div class="content-panel"&gt;
  
                      &lt;section id="unseen"&gt;
                          &lt;table id="resultTable-topsearch" class="table table-bordered table-hover table-condensed"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
  
                                      &lt;th class="small"&gt;Name&lt;/th&gt;
                                      &lt;th class="small"&gt;Company&lt;/th&gt;
                                      &lt;th class="small"&gt;Zip&lt;/th&gt;
                                      &lt;th class="small"&gt;City&lt;/th&gt;
  
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
  
                              &lt;tbody&gt;&lt;?php include 'php/top_search.php' ?&gt;&lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/section&gt;
  
                  &lt;/div&gt;&lt;!-- /content-panel --&gt;
              &lt;/div&gt;&lt;!-- /col-lg-4 --&gt;
          &lt;/div&gt;&lt;!-- /row --&gt;
  </code></pre>
  
  <p>I've been tearing hair over this, can anybody help?</p>