jQuery Autocomplete如何识别表单初始有效值避免误判报错

问题根因 #

• jQuery UI Autocomplete 仅会将用户从下拉列表中手动选择的条目赋值给ui.item变量，服务端渲染的初始值未被组件关联到对应的数据源条目，因此失焦触发change事件时会判定ui.item为空，触发清空逻辑。
• 你之前直接触发search、change事件的方案无效，是因为异步搜索请求还未返回结果时，change事件就已经执行，此时没有匹配到的ui.item，所以直接清空了字段。

解决方案 #

方案1：无额外请求（推荐，适配你的场景） #

你用Django预置的初始值100%为数据库合法值，不需要额外校验，直接在初始化时增加初始值白名单判断即可：

// 读取字段初始值作为合法白名单
const initValidValue = $("#field-id").val().trim();

$("#field-id").autocomplete({
    source: "/lookup",
    autoFocus: true,
    minLength: 0,
    delay:50,
    change: function (event, ui) {
        // 仅当不是选中的条目、且当前值不等于初始合法值时才触发错误
        if (!ui.item && $(this).val() !== initValidValue) {
            $(this).val("");
            errorShow(this, "invalid selection");
        }
    }
// 主动将初始值绑定到组件的选中项属性，兼容组件内部逻辑
}).data("ui-autocomplete").selectedItem = { 
    label: initValidValue, 
    value: initValidValue 
};

方案2：严格校验初始值合法性 #

如果需要避免前端篡改初始值的风险，可以主动调用搜索接口校验初始值有效性：

const initVal = $("#field-id").val().trim();
const $autocomplete = $("#field-id").autocomplete({
    source: "/lookup",
    autoFocus: true,
    minLength: 0,
    delay:50,
    change: function (event, ui) {
        if (!ui.item) {
            $(this).val("");
            errorShow(this, "invalid selection");
        }
    }
});

// 初始值非空时主动校验合法性
if (initVal) {
    $.getJSON("/lookup", { term: initVal }, function(res) {
        // 匹配完全一致的合法条目
        const matchedItem = res.find(item => 
            item.value === initVal || item.label === initVal
        );
        if (matchedItem) {
            $autocomplete.data("ui-autocomplete").selectedItem = matchedItem;
        } else {
            // 初始值非法的情况可在此加处理逻辑
            $autocomplete.val("");
            errorShow($autocomplete[0], "invalid initial value");
        }
    });
}

多表单复用优化 #

如果多个字段都用到该组件，可以把上述逻辑封装为通用初始化函数，避免重复代码。

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