Laravel循环渲染产品输入框时Ajax autocomplete功能失效无报错如何解决

问题原因 #

• 重复ID冲突：HTML规范要求同一页面内id属性必须唯一，你在foreach循环中给所有产品输入框都设置了相同的id="product"，jQuery的$('#product')选择器只会匹配页面中第一个出现的产品输入框，其余循环生成的输入框不会绑定autocomplete事件，所以功能失效。
• Blade语法错误：@foreach 是Laravel Blade模板的循环指令，正确语法为 @foreach(条件) 循环内容 @endforeach，你额外加的{}会原样输出到前端，破坏DOM结构，可能导致元素渲染异常。
• 路由解析问题：如果你的JS代码写在独立的.js外部文件中，Blade的模板语法{{ route('autocompleteproduct') }}不会被Laravel解析，会直接作为字符串作为请求地址，导致路径错误。
• 表单提交隐患：多条数据的input标签name属性没有加[]，提交表单时只会提交最后一组数据，虽然不是本次功能失效的直接原因，但也需要修复。

修复代码 #

1. Blade模板部分 #

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

2. JS脚本部分 #

如果JS代码直接写在Blade模板中，使用以下代码：

$(document).ready(function(){
    $('.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){
            // 指向当前触发补全的输入框，不要用固定id选择器
            $(this).val(ui.item.label);
            return false;
        }
    });
});

如果JS代码写在独立外部文件中，先给页面的body标签加属性：

<body data-autocomplete-url="{{ route('autocompleteproduct') }}">

再修改JS代码：

$(document).ready(function(){
    const autocompleteUrl = $('body').data('autocomplete-url');
    $('.product-input').autocomplete({
        source: function(request, response){
            console.log(request.term)
            $.ajax({
                url: autocompleteUrl,
                dataType: "json",
                data: {
                    search: request.term
                },
                success: function(data){
                    response(data);
                },
                error:function(){
                    alert('error');
                }
            });
        },
        select: function(event, ui){
            $(this).val(ui.item.label);
            return false;
        }
    });
});

后续排查点 #

如果修复后还是有问题，按以下顺序排查：

1. 按F12打开浏览器控制台，查看是否有JS报错
2. 切换到网络面板，输入内容时查看是否有对应的Ajax请求发出，请求地址和参数是否正确
3. 查看接口返回的JSON格式是否符合jQuery Autocomplete的要求：必须是数组，每个元素包含label/value属性

内容的提问来源于stack exchange，提问作者PieceofShid