ajax Uncaught ReferenceError for search bar in Laravel

Question

I'm trying to do a real-time search bar for my products list but I keep getting in my consol

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 display the products without refreshing the page that's why I used ajax, but since I only used it once I don't quite understand every part of this code I found so 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="chercher produit">
                        <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('Aucun resultat trouvée');
             }
            else {
                $products = DB::table('products')
                ->where('nomProduit','LIKE','%'.$request->keyword."%")
                ->where('description','LIKE','%'.$request->keyword."%")
                ->where('typeActivite','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's wrong with my code?

Answer 1

In your keyup event handler you have $('#result').html(data.html); which is already done in the ajax request so remove that line.
You also use a $e(as the event object) which is not defined anywhere

$(document).on('keyup', '#keyword', function($e){ // define event parameter
    var query = $(this).val();

    fetch_customer_data(query);
    //$('#result').html(data.html); remove this line
    $e.preventDefault();
});