jQuery Autocomplete仅回车触发数据源刷新的实现（ASP.NET MVC场景）

核心思路是完全复用现有组件的数据源拉取、下拉渲染、选中回填逻辑，只切断输入过程的自动查询链路，将查询触发入口替换为用户按下回车的手动触发动作，零冗余代码实现需求。

改造步骤 #

• 切断组件内置的自动查询触发链路
  在Autocomplete初始化配置中，将minLength属性设置为Number.MAX_VALUE。这个属性本来是控制“输入多少字符后自动触发查询”，设为最大值后，无论用户输入多少内容，组件都不会在输入过程中自动发起AJAX请求，从根源上避免无效查询。
• 绑定回车触发的手动搜索入口
  给目标输入框绑定keydown事件，检测到用户按下回车键时，手动调用Autocomplete实例自带的search方法，传入当前输入框的内容，复用原有source函数的AJAX逻辑拉取数据源、渲染下拉匹配项。

完整可运行代码 #

$("#Select").autocomplete({
    // 屏蔽输入过程的自动触发查询
    minLength: Number.MAX_VALUE,
    source: function (request, response) {
        // 原有数据源请求逻辑完全保留，无需修改
        $.ajax({
            url: '/Controller/GetSource',
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                response($.map(data.data, function (item) {
                    return { label: item.label, value: item.ID };
                }))
            },
            error: function (e) {
                console.log('数据源请求失败', e)
            }
        });
    },
    // 原有焦点悬停、选中回填逻辑完全保留
    focus: function (event, ui) {
        $("#Select").val(ui.item.label);
        return false;
    },
    select: function (event, ui) {               
        $("#Select").val(ui.item.label);
    }
});

// 回车触发搜索逻辑
$("#Select").on('keydown', function (e) {
    // 兼容主键盘回车（keyCode 13）和小键盘回车（keyCode 108）
    if (e.keyCode === 13 || e.keyCode === 108) {
        // 阻止回车默认触发的表单提交行为，避免页面刷新
        e.preventDefault();
        // 手动触发autocomplete搜索，传入当前输入的去空格内容
        $(this).autocomplete('search', $(this).val().trim());
    }
})

实操注意点 #

• 不需要清空原有的source函数或者重复写AJAX逻辑，手动触发search方法时会直接走原有数据源拉取流程，最大程度降低代码维护成本。
• 回车触发后，Autocomplete会自动展开下拉匹配面板，原生的上下键导航、鼠标点选、选中回填逻辑完全不受改造影响，交互体验和原组件保持一致。
• 输入过程中不会再发起任何AJAX请求，只有用户主动按下回车时才会发起一次查询，完全匹配“避免频繁无效查询”的需求。

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