title: Real Live Search and Filter Laravel
body: <p>I'm new on Laravel and try to implement real live search and filter on my project, but it doesn't work at all. I dont understand ajax ver much and just copy paste the code from other website. I tried to understand the code and I think its correct but it doesn't work, so please help. Thanks </p>
  
  <p>Here is my controller</p>
  
  <pre><code> public function search(Request $request)
  {
      if($request-&gt;ajax())
      {
          $output = '';
          $query = $request-&gt;get('query');
          if($query != '')
          {
              $data = Service::table('service')
                  -&gt;where('keterangan', 'like', '%'.$query.'%')
                  -&gt;orWhere('biaya', 'like', '%'.$query.'%')
                  -&gt;get();
          }
          else
          {
              $data = Service::table('service')
              -&gt;orderBy('kodeService', 'asc')
              -&gt;get();
          }
          $total_row = $data-&gt;count();
          if($total_row &gt; 0)
          {
              foreach($data as $row)
              {
                  $output .= '
                  &lt;tr&gt;
                  &lt;td&gt;'.$row-&gt;kodeService.'&lt;/td&gt;
                  &lt;td&gt;'.$row-&gt;keterangan.'&lt;/td&gt;
                  &lt;td&gt;'.$row-&gt;biayaService.'&lt;/td&gt;
                  &lt;/tr&gt;
                  ';
              }
          }
          else
          {
              $output = '
              &lt;tr&gt;
              &lt;td align="center" colspan="5"&gt;No Data Found&lt;/td&gt;
              &lt;/tr&gt;
              ';
          }
          $data = array(
              'table_data'  =&gt; $output
          );
          echo json_encode($data);
      }
  }
  </code></pre>
  
  <p>This is the script</p>
  
  <pre><code>$(document).ready(function(){
  fetch_customer_data();
  function fetch_customer_data(query = '')
  {
      $.ajax({
              url:"{{ route('live_search.action') }}",
              method:'GET',
              data:{query:query},
              dataType:'json',
              success:function(data)
              {
                  $('#table tbody').html(data.table_data);
              }
      });
  }
  
  $(document).on('keyup', '#search', function(){
      var query = $(this).val();
      fetch_customer_data(query)
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Route :</p>
  
  <pre><code>Route::resource('service', 'ServiceController');
  Route::get('service/search', 'Service@search')-&gt;name('live_search.action');
  </code></pre>
  
  <p>And index.blade</p>
  
  <pre><code> &lt;table class="table table-striped table-hover table-bordered" id="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Kode Service&lt;/th&gt;
              &lt;th&gt;Keterangan&lt;/th&gt;
              &lt;th&gt;Biaya&lt;/th&gt;
              &lt;th&gt;Aksi&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          @foreach($service as $data)
          &lt;tr&gt;
              &lt;td&gt;&lt;?= $data-&gt;kodeService?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;?= $data-&gt;keterangan ?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;?= $data-&gt;biayaService?&gt;&lt;/td&gt;
              &lt;td&gt;
  
                  &lt;a class="btn btn-sm btn-info" href="{{ route('service.edit', $data['kodeService']) }}"&gt; &lt;i class="oi oi-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt;
                  &lt;button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal"&gt;&lt;span class="oi oi-trash"&gt;&lt;/span&gt; Hapus&lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          @endforeach
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>