Jquery-UI Autocomplete选中后Model字段被设为0的问题排查

核心问题原因 #

1. 未阻止自动补全默认行为：jQuery UI Autocomplete选中选项时，默认会把输入框值设为ui.item.value。如果API返回的模型数据里value字段为0（或未正确定义），就会覆盖手动设置的ui.item.model。
2. 重复绑定select事件：代码同时在autocomplete初始化时定义select回调，又单独绑定autocompleteselect事件，两者易产生冲突。
3. 选择器未限定上下文：$("input[name$='Model']")未指定newrow范围，可能修改页面其他Model输入框的值。

修复后的代码 #

// Autocomplete list of models
$("input[name$='Model']", newrow).autocomplete({
    source: function (request, response) {
        $.ajax({
            url: `@ViewBag.API/api/modeldatabase/models`,
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                response(data);
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        // 阻止默认行为，避免框架自动填充错误值
        event.preventDefault();
        // 仅操作当前行的字段
        $("select[name$='Category']", newrow).val(ui.item.category);
        $("input[name$='Manufacturer']", newrow).val(ui.item.manufacturer);
        $("input[name$='Model']", newrow).val(ui.item.model);
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("ui-autocomplete-item", item)
        .append("<a>" + item.manufacturer + " - " + item.model + "</a>")
        .appendTo(ul);
};

关键修改说明 #

• 添加event.preventDefault()：彻底阻止框架默认的value填充逻辑，确保手动赋值生效。
• 合并事件处理逻辑：把单独绑定的autocompleteselect逻辑整合到autocomplete初始化的select回调中，消除冲突。
• 统一上下文限定：所有字段选择器都加上newrow，确保只修改当前表格行的输入框。

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