Categories: Laravel Tutorial: Step by Step Guide to Building Your First Laravel Application - Techanical-Atom

Create Laravel Live Search Using Ajax5 min read

Reading Time: 3 minutes

What if I said that you can create laravel live search using Ajax with just a small piece of code ? Yes , you heard it right.  Just couple of code and you are good to go. In this article, i will reveal one of the best way to Create Laravel Live Search Using Ajax. Here you go

Best Way To Create Laravel Live Search Using Ajax

Irrespective of what you are building ,it can be a blog or an ecommerce store website , a live search feature is one of the most common feature of an application. You will find many resources promising you the integration of a simple search bar. However, a live search bar is something to look for. As compared to simple search bar, the live search bar is more efficient in terms of getting the records from database in real time. This process minimizes the search time. And also increases the possibility of getting more sales as your customer will come across a platter of related & desired products.

 

Create Laravel Live Search Using Ajax
Create Laravel Live Search Using Ajax

To illustrate the complete potential of a live search in Laravel using Jquery ajax . We are going to create a table and the Ajax live search bar will process the live search through the table & display the desired records.

Before proceeding with the process , i believe you have already configured your laravel application on one of the below servers:

  1. Apache.
  2. NGINX.
  3. Integrated PHP web server for testing.

Read more : HOW TO DEPLOY LARAVEL PROJECT ON SERVER

 

Step-1 Create the Controller

php artisan make:controller LiveSearch
In this we have created a controller names as LiveSearch which can be found in app\Http\Controller\LiveSearch.php

Step-2 Go to app\Controller\LiveSearch.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('CustomerName', 'like', '%'.$query.'%')
->orWhere('Address', 'like', '%'.$query.'%')
->orWhere('City', 'like', '%'.$query.'%')
->orWhere('PostalCode', 'like', '%'.$query.'%')
->orWhere('Country', 'like', '%'.$query.'%')
->orderBy('CustomerID', 'desc')
->get();
}
else
{
$data = DB::table('tbl_customer')
->orderBy('CustomerID', 'desc')
->get();
}
$total_row = $data->count();
if($total_row > 0)
{
foreach($data as $row)
{
$output .= ''.$row->CustomerName.''.$row->Address.''.$row->City.''.$row->PostalCode.''.$row->Country.'';
}
}
else
{
$output = 'No Data Found';
}
$data = array(
'table_data' => $output,
'total_data' => $total_row
);
echo json_encode($data);
}
}
}
In this we have created an index fucntion which load the view which we are going to create in step-3 of this tutorial. Secondly we have created action() function which will receieve the data sent by the serachbox using the ajax request and execute the query and then send the HTML response using json_encode function.
After this Go to Your resource folder and craete a view file which will be our next step

#- Step-3 Create a View File (LiveSearch.blade.php)

Here Ajax script will pick the value from search textbox as we have type into for search something. It will send value to action method of LiveSearch controller. Under this method it will search data into database according to value of search textbox and get the response back to Ajax request. Once it has received then it will display response of data on web page in HTML table format.

#- Step- 4 Set the Routes For View And Controller

Route::get('/live_search', 'LiveSearch@index'); Route::get('/live_search/action', 'LiveSearch@action')->name('live_search.action');
In the end we want to set the route for LiveSearch controller two method which we have seen, for this we have to go to routes/web.php and write following code into it.

#Conclusion

This is a very simple Laravel Live Search and can be implemented in any small project but for any big project you should look for any package at Github or any other place most probably Spatie will have any package for Laravel Live Search . For similar kinds of article keep Coming back on Techanical-Atom and if you have any query do put them into the comment section below. 

All Rights Reserved @ Techanical-Atom
%d bloggers like this: