Posted inTechnology / Ajax / JavaScript / jQuery / Laravel

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.

Define the Laravel Routes

name('live_search.action');
?>

Create a Laravel Blade file View

resources/views/live_search.blade.php



 
  Live search in laravel using AJAX - Pakainfo.com
  
  
  
 
 
  

Live search in laravel using AJAX - Pakainfo.com


Search Member Data

Total Member Data :

Member Name RecAddress Country Postal Code Area
$(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); }); });

Create the Controller using PHP artisan

php artisan make:controller LiveSearch

Laravel Create Controller

app/Http/controller/LiveSearch.php

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 .= '
        
         '.$datarow->MemberName.'
         '.$datarow->RecAddress.'
         '.$datarow->Country.'
         '.$datarow->ZipCode.'
         '.$datarow->Area.'
        
        ';
       }
      }
      else
      {
       $output = '
       
        No Any Member Data Found
       
       ';
      }
      $data = array(
       'table_data'  => $output,
       'total_data'  => $total_row
      );

      echo json_encode($data);
     }
    }
}
Angular 6 CRUD Operations Application Tutorials

Read :

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype