I'm attempting to create a real-time search bar for my products list, but I keep encountering an error in my console
Uncaught ReferenceError: data is not defined
at HTMLInputElement.<anonymous> (produits:243)
at HTMLDocument.dispatch (jquery-2.2.4.min.js:3)
at HTMLDocument.r.handle (jquery-2.2.4.min.js:3)
I want to show the products without refreshing the page, which is why I opted for ajax. However, as I have only used it once, I am struggling to grasp every part of this code I discovered. Here is my blade:
<div class="view-product d-flex align-items-center mr-15">
<input type="text" placeholder='...' class="form-check" id="keyword" name="keyword" title="search product">
<p><i class="fa fa-search mr-15" ></i></p>
<div id="result">
</div>
</div>
Here is my script
<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>
<script>
$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
$.ajax({
url:"{{ route('search') }}",
method:'GET',
data: {query: query},
dataType:'json',
success: function(data) {
if (data.success) {
$('#result').html(data.html);
} else {
console.log(data.message);
}
}
})
}
$(document).on('keyup', '#keyword', function(){
var query = $(this).val();
fetch_customer_data(query);
$('#result').html(data.html);
$e.preventDefault();
});
});
</script>
And finally, here is my controller
if($request->ajax()) {
$query = $request->get('query');
if(empty($query)) {
return back()->withError('No results found');
}
else {
$products = DB::table('products')
->where('product_name','LIKE','%'.$request->keyword."%")
->where('description','LIKE','%'.$request->keyword."%")
->where('activity_type','LIKE','%'.$request->keyword."%")
->get();
}
$total = $products->count();
$html = view('front.search_result', [
'products' => $products,
])->render();
return response()->json([
'success' => true,
'html' => $html,
'total' => $total,
], 200);
} else {
return response()->json([
'success' => false,
'message' => "Something went wrong!",
], 403);
}
What could be the issue with my code?