Ajax 自动完成不适用于循环结果数据

Question

我在 laravel 中有一个编辑页面，其中有多个使用 foreach 显示的数据产品，我想使用 ajax 自动完成产品名称，但它不起作用。但我没有收到任何错误消息。

这是代码

@foreach($product as $item){
               <input type="text" name="product" id="product" value="{{ $item->name }}"/>
               <input type="number" name="qty" id="qty" value="{{ $item->quantity }}"/>
               <input type="number" name="price" id="price" value="{{ $item->price }}"/>
}

和脚本

$(document).ready(function(){
    $('#product').autocomplete({
            source: function(request, response){
                console.log(request.term)
                $.ajax({
                    url:"{{ route('autocompleteproduct')}}",
                    dataType: "json",
                    data: {
                        search: request.term
                    },
                    success: function(data){
                        response(data);
                    },error:function(){
                        alert('error');
                    }
                });
            },
            select: function(event, ui){
                $('#product').val(ui.item.label);
                return false;
            }
        });
});

Answer 1

正如我在我的评论中提到的，div 上的 ID 应该是唯一的，在这里您循环遍历每个项目上都包含“#product”ID 的项目。使用 class，或者更具体地说明每个产品的实际 ID

下面我删除了每个输入的 ID，因为您没有使用任何不需要的标签。我还将它们包装在 class 中以循环遍历每个，这样我们就可以专门针对 children

@foreach($product as $item)
    <div class="product-inputs" id="product-{{ $item->id }}">
        <input type="text" name="product" value="{{ $item->name }}">
        <input type="number" name="qty" value="{{ $item->quantity }}">
        <input type="number" name="price" value="{{ $item->price }}">
    </div>
@endfor

$(document).ready(function(){
    $('.product-inputs').each(function() {
        var id = $(this).attr('id');
        var input = $('#' + id + ' input[name=product]');
        input.autocomplete({
            source: function(request, response){
                console.log(request.term)
                $.ajax({
                    url:"{{ route('autocompleteproduct')}}",
                    dataType: "json",
                    data: {
                        search: request.term
                    },
                    success: function(data){
                        response(data);
                    },error:function(){
                        alert('error');
                    }
                });
            },
            select: function(event, ui){
                input.val(ui.item.label);
                return false;
            }
        });
    });
});

Ajax 自动完成不适用于循环结果数据

Ajax autocomplete doesn't work with looping result data

ajax

laravel

autocomplete