Laravel中搜索栏的ajax未捕获ReferenceError

如何解决Laravel中搜索栏的ajax未捕获ReferenceError

我正在尝试为我的产品列表做一个实时搜索栏，但我一直在我的控制台中

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)

我想在不刷新页面的情况下显示产品，这就是我使用 ajax 的原因，但由于我只使用过一次，所以我不太明白我发现的这段代码的每一部分 所以这是我的刀片：

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

这是我的脚本

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

最后这是我的控制器

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','%'.$request->keyword."%")
                ->where('typeActivite','%'.$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);
        }

有人可以帮我找出我的代码有什么问题吗？提前致谢

解决方法

在您的 keyup 事件处理程序中，您有 $('#result').html(data.html); 已在 ajax 请求中完成，因此删除该行。
您还可以使用未在任何地方定义的 $e（作为事件对象）

$(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();
});