Create Dynamic Search Box using Ajax [ with table ]

<!-- Your Search Box [ with input type text ] -->
<input type="text" name="your_input_name" id="your_input_id" class="form-control"> //when u type a letter or alphabet, search will automaticaly work, no need to click button

<!-- Your Table -->
<table class="table table-bordered">
    <thead class="thead">
        <tr>
            <th style="color: #ffffff"> Y </th>
            <th style="color: #ffffff"> o </th>
            <th style="color: #ffffff"> u </th>
            <th style="color: #ffffff"> d </th>
            <th style="color: #ffffff"> e </th>
            <th style="color: #ffffff"> f </th>
            <th style="color: #ffffff"> i </th>
            <th style="color: #ffffff"> n </th>
            <th style="color: #ffffff"> e </th>
        </tr>
    </thead>
    <tbody id="your_tbody_id" class="tbody"></tbody>
</table>

<!-- Process [ using ajax ] -->
<script type="text/javascript">
  $(document).ready(function(){
    $("#your_input_id").keyup(function(){ //keyup function, right use if u search with name or address which that's match with your data in your database
      var new_variable = $("#your_input_id").val(); //define variable and get the value from your_input_id
      $("#your_tbody_id").html("<tr><td colspan=12><img src='img/load.gif'/></td></tr>") // if u have Loading.gif or etc,u can use that here
        $.ajax({ //ajax process
          url: "your_process_page.php",
          data: "new_variable="+new_variable,
          cache: false,
          success: function(msg){
            $("#your_tbody_id").html(msg); //if success, the results will appear in your_tbody_id
          }
        });
    });
  });
</script>