Laravel AJAX Live Search Example

Today, We want to share with you Laravel AJAX Live Search Example.In this post we will show you Laravel 5.6 – Dynamic Ajax Autocomplete Search Box, hear for Create Live Search In Laravel Using AJAX we will give you demo and example for implement.In this post, we will learn about Ajax Live Search Table Generation in Laravel with an example.

Laravel AJAX Live Search Example

There are the Following The simple About Laravel AJAX Live Search Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel Typeahead Search Tutorial With Example, so the Fetch records from MySQL with jQuery AJAX – Laravel for this example is following below.

Also Read :  jquery replace newline with br Example - Convert new lines to br - nl2br function

Define the Laravel Routes

<?php
Route::get('/live_search', '[email protected]');
Route::get('/live_search/action', '[email protected]')->name('live_search.action');
?>

Create a Laravel Blade file View

resources/views/live_search.blade.php

<!DOCTYPE html>
<html>
 <head>
  <title>Live search in laravel using AJAX - Pakainfo.com</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 pakainfo">
   <h3 align="center">Live search in laravel using AJAX - Pakainfo.com</h3><br />
   <div class="panel panel-success pakainfo">
    <div class="panel-heading pakainfo">Search Member Data</div>
    <div class="panel-body pakainfo">
     <div class="form-group pakainfo">
      <input type="text" name="search" id="search" class="form-control" placeholder="Search Member Data" />
     </div>
     <div class="table-responsive pakainfo">
      <h3 align="center">Total Member Data : <span id="total_records"></span></h3>
      <table class="pakainfo table table-striped table-bordered">
       <thead>
        <tr>
         <th>Member Name</th>
         <th>RecAddress</th>
         <th>Country</th>
         <th>Postal Code</th>
         <th>Area</th>
        </tr>
       </thead>
       <tbody>

       </tbody>
      </table>
     </div>
    </div>    
   </div>
  </div>

  <script>
$(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)
   {
    $('tbody').html(data.table_data);
    $('#total_records').text(data.total_data);
   }
  })
 }

 $(document).on('keyup', '#search', function(){
  var query = $(this).val();
  fetch_customer_data(query);
 });
});
</script>

 </body>
</html>

Create the Controller using PHP artisan

Also Read :  Search Engine Rankings TIPS AND TRICKS

php artisan make:controller LiveSearch

Laravel Create Controller

app/Http/controller/LiveSearch.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class LiveSearch extends Controller
{
    function index()
    {
     return view('live_search');
    }

    function action(Request $request)
    {
     if($request->ajax())
     {
      $output = '';
      $query = $request->get('query');
      if($query != '')
      {
       $data = DB::table('tbl_customer')
         ->where('MemberName', 'like', '%'.$query.'%')
         ->orWhere('RecAddress', 'like', '%'.$query.'%')
         ->orWhere('Country', 'like', '%'.$query.'%')
         ->orWhere('ZipCode', 'like', '%'.$query.'%')
         ->orWhere('Area', 'like', '%'.$query.'%')
         ->orderBy('MemberId', 'desc')
         ->get();
         
      }
      else
      {
       $data = DB::table('tbl_customer')
         ->orderBy('MemberId', 'desc')
         ->get();
      }
      $total_row = $data->count();
      if($total_row > 0)
      {
       foreach($data as $datarow)
       {
        $output .= '
        <tr>
         <td>'.$datarow->MemberName.'</td>
         <td>'.$datarow->RecAddress.'</td>
         <td>'.$datarow->Country.'</td>
         <td>'.$datarow->ZipCode.'</td>
         <td>'.$datarow->Area.'</td>
        </tr>
        ';
       }
      }
      else
      {
       $output = '
       <tr>
        <td align="center" colspan="5">No Any Member Data Found</td>
       </tr>
       ';
      }
      $data = array(
       'table_data'  => $output,
       'total_data'  => $total_row
      );

      echo json_encode($data);
     }
    }
}

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  Laravel Group By Count Multiple Columns

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Laravel AJAX Live Search Example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]