Laravel Tutorials

Important Links

Home » Laravel Framework »

Ajax search data in laravel

Controller

File name : 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('users')
->where('name', 'like', '%'.$query.'%')
->orWhere('address', 'like', '%'.$query.'%')
->orWhere('city', 'like', '%'.$query.'%')
->orWhere('pincode', 'like', '%'.$query.'%')
->orWhere('state', 'like', '%'.$query.'%')
->orderBy('id', 'desc')
->get();

}
else
{
$data = DB::table('users')
->orderBy('id', 'desc')
->get();
}
$total_row = $data->count();
if($total_row > 0)
{
foreach($data as $row)
{
$output .= '
<tr>
<td>'.$row->name.'</td>
<td>'.$row->address.'</td>
<td>'.$row->city.'</td>
<td>'.$row->pincode.'</td>
<td>'.$row->state.'</td>
</tr>
';
}
}
else
{
$output = '
<tr>
<td align="center" colspan="5">No Data Found</td>
</tr>
';
}
$data = array(
'table_data' => $output,
'total_data' => $total_row
);

echo json_encode($data);
}
}
}

View

File name : live_search.blade.php

<!DOCTYPE html>
<html>
<head>
<title>search data 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">search data in laravel using AJAX</h3><br />
<div class="panel panel-default">
<div class="panel-heading">Search user</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">
<h3 align="center">Total Data : <span id="total_records"></span></h3>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>pincode</th>
<th>state</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

<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>

Route

File name : web.php

<?php

Route::get('/live_search', 'LiveSearch@index');
Route::get('/live_search/action', 'LiveSearch@action')->name('live_search.action');

?>

Itechtuto