title: ajax putting auto complete result into HTML table
body: <p>I'm trying to implement ajax auto complete function to my HTML code, I want to put the result from the auto complete function into a table on my html page, the auto complete function is working and I get a drop down list but the table isn't created and I can't see any result in it.</p>
  
  <p><strong>Here is my code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"&gt;
  &lt;title&gt;DMC&lt;/title&gt;
  
  
  &lt;link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="container"&gt;
  
          &lt;div class="page-header"&gt;
          &lt;h3 style="color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;"&gt;
          &lt;a href="http://www.codingcage.com/2016/12/autocomplete-search-with-href-link-php.html" target="_blank"&gt;DMC&lt;/a&gt;&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
  
              &lt;div class="col-lg-12 text-center"&gt;
  
                  &lt;div class="col-lg-offset-2"&gt;
                  &lt;form&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="input-group"&gt;
                      &lt;input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search..." /&gt;
                      &lt;div class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;table border='1' id="table_body"&gt;&lt;/table&gt;
                  &lt;/div&gt;
                  &lt;/form&gt;  
                  &lt;/div&gt; 
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
  
      $('#txtSearch').autocomplete({
          source: "post_search.php",
          minLength: 1,
          select: function(event, ui) {
              var url = ui.item.id;
              if (url != '#') {
                  location.href = url
              }
  
              var table = $("#table_body");
              $.each(data, function(event, ui){
              table.append("&lt;tr&gt;&lt;td&gt;"+ui.item.value+"&lt;/td&gt;&lt;td&gt;"+ui.item.id+"&lt;/td&gt;");
          },
          open: function(event, ui) {
              $(".ui-autocomplete").css("z-index", 1000)
          }       
      })
  
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>