ASP.NET MVC中Autocomplete选择后Line Manager Name秒隐问题解决

问题核心原因 #

1. 多版本库冲突：同时引入多套jQuery/jQuery UI会导致Autocomplete的事件触发逻辑混乱，select事件赋值后被其他版本的事件覆盖清空。
2. 事件重复绑定+未定义变量：#txtLineManagerId同时绑定了Autocomplete的select事件和原生change事件，且change事件中存在未定义的response变量，报错后触发页面异常重置。
3. 环境差异：部分电脑出现问题大概率是浏览器缓存了旧脚本，或是不同浏览器对事件触发顺序的处理逻辑不同。

一、解决秒隐问题 #

1. 清理重复的库引用

• 彻底移除项目中所有多余的jQuery、jQuery UI引用，只保留一套兼容版本（例如jQuery 3.6.0 + jQuery UI 1.13.2）。
• 检查布局页(_Layout.cshtml)和当前视图的<script>标签，确保没有重复引入同一库的不同版本。

2. 修复change事件的未定义变量错误

• 找到绑定#txtLineManagerId change事件的代码，删除或修正未定义的response变量。如果是Ajax回调中误用了变量，要确保变量是Autocomplete回调传入的合法参数。

二、实现change与Autocomplete事件无冲突 #

调整事件绑定逻辑，避免Autocomplete选择后重复触发change事件：

$(document).ready(function() {
    $("#txtLineManagerId").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "/api/Employees/Search",
                type: "GET",
                data: { keyword: "%" + request.term + "%" },
                success: function(data) {
                    response(data); // 此处response是Autocomplete回调的合法参数，确保作用域正确
                }
            });
        },
        select: function(event, ui) {
            // 赋值Line Manager Name
            $("#txtLineManagerName").val(ui.item.lineManagerName);
            // 阻止默认change事件触发，避免冲突
            event.preventDefault();
            // 标记本次输入由Autocomplete选择触发
            $(this).data("isAutoCompleted", true);
        }
    }).off("change").on("change", function() {
        // 仅当手动输入而非Autocomplete选择时，执行change逻辑
        if (!$(this).data("isAutoCompleted")) {
            $("#txtLineManagerName").val(""); // 手动输入时清空名称
        }
        // 重置标记
        $(this).data("isAutoCompleted", false);
    });
});

三、确保change事件仅触发一次 #

1. 先解绑再绑定：使用off("change")清空原有绑定，避免重复绑定导致多次触发，如上例所示。
2. 避免全局重复绑定：所有事件绑定逻辑放在$(document).ready()中，确保DOM加载完成后仅执行一次绑定。
3. 控制台验证：打开浏览器F12控制台，查看是否有事件重复绑定的警告，及时调整代码。

验证步骤 #

• 清空浏览器缓存（Ctrl+Shift+Del），确保加载最新脚本。
• 检查控制台是否有报错，尤其是变量未定义、库加载失败的提示。
• 在不同浏览器（Chrome、Firefox、Edge）中测试，确认兼容性。

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