title: fetching data from database and display it using ajax
body: <p>I am trying to fetch data with ajax on keyup function, but every time I fetch it gives undefined output in tabular form. I am using one textfield with id search_data, whatever I write in this textfield, the output gets displayed in a div. But my code is displaying undefined values in tabular format. Please help</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Bootstrap Table&lt;/title&gt;
    &lt;link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css"&gt;
    &lt;script src="bootstrap/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
     .container{margin:auto;}
    &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;br /&gt;
    &lt;div class='input-group' style='margin-left:70%;'&gt;
     &lt;input type="text" id="search_data" class="col-xs-2" placeholder="Search"&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
    &lt;/div&gt;
    &lt;script id="source" language="javascript" type="text/javascript"&gt;
     $('#output').append("&lt;br /&gt;&lt;h3&gt;&lt;center&gt;Employee Table&lt;/center&gt;&lt;/h3&gt;");
      var html = "&lt;br /&gt;&lt;h3&gt;&lt;center&gt;Employee Table&lt;/center&gt;&lt;/h3&gt;";
      $.ajax({                                      
       url: 'bootstrap_table_db1.php', data: "", dataType: 'json', success: function(rows)       
        {
          $(".container").html(html);
        }
       });
     var timer;
     $("input").on('keyup', function()
      {
       var results;
       clearTimeout(timer);
       timer = setTimeout(function()
        { 
         var search_data = $('#search_data').val();
         if(search_data != "")
          {
           $.ajax(
            {
             type: "POST",
             url: 'test2_db.php',
             data: {search: search_data},
             dataType: 'html',
             success: function(result)
              {
               html+= "&lt;div class='table-responsive'&gt;";
               html+= "&lt;table  class='table table-bordered table-striped'&gt;";
               html+=  "&lt;tr&gt;" +
                      "&lt;th&gt;Employee Name&lt;/th&gt;" +
                      "&lt;th&gt;Email&lt;/th&gt;" +
                      "&lt;th&gt;Message&lt;/th&gt;" +
                      "&lt;th&gt;Date&lt;/th&gt;" +
                     "&lt;/tr&gt;"
               for (var i in result)
                {
                 var row = result[i];
                 var employee_name = row[1];
                 var email = row[2];
                 var message = row[3];
                 var date = row[4];
                 html+= "&lt;tr&gt;" +
                         "&lt;td width='25%'&gt;" + employee_name + "&lt;/td&gt;" +
                         "&lt;td width='25%'&gt;" + email + "&lt;/td&gt;" +
                         "&lt;td width='25%'&gt;" + message + "&lt;/td&gt;" +
                         "&lt;td width='25%'&gt;" + date + "&lt;/td&gt;" +
                        "&lt;/tr&gt;";                  
               }
             html+= "&lt;/table&gt;";
             html+= "&lt;/div&gt;";
             $(".container").html(html);
            }
          });
        }
      }, 1000);
    });
    &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The given below is my sql code</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css"&gt;
    &lt;script src="bootstrap/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;?php
    mysql_connect("localhost", "root", "root") || die(mysql_error());
    mysql_select_db("bijit") || die(mysql_error());
    $result = mysql_query("SELECT * FROM employee ORDER BY id DESC LIMIT 5");
    $data = array();
     if(isset($_POST['search']) &amp;&amp; !empty($_POST['search']))
      {
       $s = $_POST['search'];
       if(!empty($s))
        {
         $result2 = mysql_query("SELECT * FROM employee WHERE Employee_name LIKE '%$s%' || Email LIKE '%$s%'|| Message LIKE '%$s%' ");
         while ( $row = mysql_fetch_array($result2) )
          {
           $data[] = $row;
          }
         echo json_encode( $data );
        }
      }
    ?&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>