网格布局下多输入框无法启用jQuery UI自动补全的技术问询

嘿，我来帮你解决这个多输入框的jQuery UI Autocomplete失效问题！

首先，核心问题通常出在批量绑定的方式上——虽然你能正确选中所有目标元素，但直接给jQuery集合调用.autocomplete()有时候会因为元素上下文或者动态渲染的问题失效，正确的做法是遍历每个元素单独绑定。

步骤1：确认目标输入框的选择器 #

先确保你能精准选中网格第一列的所有输入框。比如在CSHTML中，你可以给这些输入框统一加个类名（比如location-input），或者通过网格的结构选择：

<!-- 示例CSHTML网格（Razor语法） -->
<table class="location-grid">
    @foreach (var item in Model.GridItems)
    {
        <tr>
            <!-- 第一列的地点输入框，加统一类名 -->
            <td><input type="text" class="location-input" name="Location_@item.Id" /></td>
            <td><input type="text" name="OtherField_@item.Id" /></td>
        </tr>
    }
</table>

步骤2：遍历元素单独绑定Autocomplete #

不要直接给选中的集合绑定，而是用.each()遍历每个输入框，逐个初始化Autocomplete。这样能确保每个元素都正确绑定功能：

$(document).ready(function() {
    // 选中所有目标输入框，遍历每个元素
    $('.location-grid td:first-child input, .location-input').each(function() {
        $(this).autocomplete({
            // 地点检索的数据源，可以是本地数组或AJAX请求
            source: function(request, response) {
                // 示例：AJAX请求后端接口获取地点列表
                $.ajax({
                    url: '/Location/GetSuggestions',
                    type: 'GET',
                    data: { term: request.term }, // 传入用户输入的关键词
                    success: function(data) {
                        // 后端返回的数据格式要符合要求：数组或{label, value}对象数组
                        response(data);
                    }
                });
            },
            minLength: 2, // 输入至少2个字符才触发检索
            select: function(event, ui) {
                // 选中选项后的回调（可选）
                $(this).val(ui.item.label);
                return false;
            }
        });
    });
});

常见问题排查 #

如果还是失效，检查这几个点：

• 脚本加载顺序：确保先加载jQuery，再加载jQuery UI脚本，最后加载你的自定义JS
• 控制台报错：打开浏览器开发者工具，看是否有autocomplete is not a function这类错误（说明jQuery UI没正确加载）
• 动态生成的元素：如果网格是通过AJAX动态加载的，要在元素渲染完成后再执行绑定代码，或者用事件委托的方式处理
• 数据源格式：后端返回的数据必须是纯字符串数组，或者包含label和value属性的对象数组，否则Autocomplete无法识别

动态新增行的处理 #

如果用户可以新增网格行，记得在新增行后给新的输入框重新绑定Autocomplete：

// 封装绑定逻辑成函数，方便复用
function bindLocationAutocomplete($input) {
    $input.autocomplete({
        source: '/Location/GetSuggestions',
        minLength: 2
    });
}

// 初始绑定
$(document).ready(function() {
    $('.location-input').each(function() {
        bindLocationAutocomplete($(this));
    });

    // 新增行按钮的点击事件
    $('#add-new-row').click(function() {
        // 生成新行的HTML
        var newRow = `<tr>
            <td><input type="text" class="location-input" name="Location_New" /></td>
            <td><input type="text" name="OtherField_New" /></td>
        </tr>`;
        $('.location-grid').append(newRow);
        // 给新输入框绑定Autocomplete
        bindLocationAutocomplete($('.location-grid tr:last-child .location-input'));
    });
});

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