How can I use searchbar using ajax in laravel? - ajax

Question

In laravel, I am using search bar in list view, It will search from the record using ajax and display me the output.
But it's now working, when i write any text in search bar I didn't get any output. All records displays as it is.
My database in mongoDb, and i am coding in laravel.
Here is my view file code.
view
<div class="table-responsive m-t-40">
<div class="form-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Search Department" />
</div>
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th>Department Name</th>
<th>Created By</th>
<th>Created On</th>
#if (App\User::isPermitted(['edit_department', 'update_department', 'delete_department']))
<th>Action</th>
#endif
</tr>
</thead>
<tbody>
#if($listOfDepartment != null)
#foreach($listOfDepartment as $departmentList)
<tr>
<td>{{$departmentList->nameOfDepartment}}</td>
<td>{{$departmentList->createdBy}}</td>
<td>{{$departmentList->created_at}}</td>
#if (App\User::isPermitted(['edit_department', 'update_department', 'delete_department']))
<td>
<i class="fa fa-edit fa-lg" style="color:#0066ff" aria-hidden="true"></i> 
<i class="fa fa-trash fa-lg" onclick="delete_user(this); return false;" style="color:red" aria-hidden="true"></i>
</td>
#endif
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
script
<script>
$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
$.ajax({
url:"{{ route('list_department') }}",
method:'GET',
data:{query:query},
dataType:'json',
success:function(data)
{
$('tbody').html(data.table_data);
}
})
}
$(document).on('keyup', '#search', function(){
var query = $(this).val();
fetch_customer_data(query);
});
});
</script>
and here is my code of controller file
namespace App\Http\Controllers;
use App\Department;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Schema;
public function listDepartment(Request $request)
{
$listOfDepartment = Department::all();
if($request->ajax())
{
$output = '';
$query = $request->get('query');
if($query != '')
{
$data = Schema::table('department')
->where('nameOfDepartment', 'like', '%'.$query.'%')
->orWhere('createdBy', 'like', '%'.$query.'%')
->get();
}
else
{
$data = Schema::table('department')
->orderBy('nameOfDepartment', 'asc')
->get();
}
$total_row = $data->count();
if($total_row > 0)
{
foreach($data as $row)
{
$output .= '<tr>
<td>'.$row->nameOfDepartment.'</td>
<td>'.$row->createdBy.'</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);
}
return view('pages.department', compact('listOfDepartment'));
}