<!DOCTYPE html>

<html>
 <head>
  <title>Live search in laravel using AJAX</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br />
  <div class="container box">
   <h3 align="center">Live search in laravel using AJAX</h3><br />
   <div class="panel panel-default">
    <div class="panel-heading">Search Data</div>
    <div class="panel-body">
     <div class="form-group">
      <input type="text" name="search" id="search" class="form-control" placeholder="Search User ..." />
     </div>
     <div class="table-responsive">
       <table class="table table-striped table-bordered">
       <thead>
        <tr>
         <th>SKU</th>
         <th>DESKRIPSI</th>
		 <th>HARGA</th>
        </tr>
       </thead>
       <tbody>
 
       </tbody>
      </table>
     </div>
    </div>    
   </div>
  </div>
 </body>
</html>
 
<script type="text/javascript">
$(document).ready(function(){
 
 fetch_user_data();
 
 function fetch_user_data(query = '')
 {
  $.ajax({
   url:"{{ route('livesearch.action') }}",
   method:'GET',
   data:{query:query},
   dataType:'json',
   success:function(data)
   {
    //$('tbody').html(data.table_data);
    $('tbody').html(data.table_data);
   }
  })
 }
 
 $(document).on('keyup', '#search', function(){
  var query = $(this).val();
  fetch_user_data(query);
 });
});
</script>