时间戳

首页 > 解决方案 > Laravel 中搜索栏的 ajax Uncaught ReferenceError

jquery - Laravel 中搜索栏的 ajax Uncaught 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','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);
        }

我的代码有什么问题？

标签： jqueryjsonajaxlaravelsearchbar

解决方案

在您的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();
});

推荐阅读