ASP.NET MVC中Autocomplete功能的jQuery与Bootstrap报错解决问询

一、清理重复冲突的脚本引用 #

页面重复引入的jQuery、Bootstrap或Autocomplete脚本是冲突根源，先全部清理，只保留一套适配的引用，必须严格遵守加载顺序：

• 先加载jQuery 3.4.1，再加载依赖它的Bootstrap和Autocomplete插件
• 正确引用示例：

<!-- 仅保留这一套jQuery 3.4.1引用 -->
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<!-- 使用适配jQuery 3.x的Bootstrap版本（推荐Bootstrap 4.6+，完全兼容jQuery 3.x，避免用老旧的Bootstrap 3.x） -->
<script src="~/Scripts/bootstrap.min.js"></script>
<!-- 使用支持jQuery 3.x的Autocomplete插件，比如jQuery UI 1.12.x及以上版本的Autocomplete -->
<script src="~/Scripts/jquery-ui.min.js"></script>

二、解决版本匹配问题 #

• Bootstrap版本适配：jQuery 3.4.1与Bootstrap 3.x部分版本兼容性差，直接替换为Bootstrap 4.6+；若用Bootstrap 5，注意它不依赖jQuery，但需确保Autocomplete插件依赖的jQuery已正常加载
• Autocomplete插件适配：如果用的是jQuery UI Autocomplete，必须选择1.12.x及以上版本，老版本不支持jQuery 3.x，会直接导致autocomplete函数未定义

三、验证功能代码 #

Autocomplete初始化代码必须放在$(document).ready()中，避免DOM未加载完成就调用函数，示例：

$(document).ready(function() {
    // 替换为你页面的输入框ID
    $("#resignationInput").autocomplete({
        source: "/Resign/GetEmployeeList", // 替换为你的数据源接口地址
        minLength: 2 // 输入至少2个字符触发提示
    });
});

打开浏览器控制台（F12），检查脚本加载状态，确认无404或加载错误，同时排查是否还有函数未定义类报错。

四、排查布局页与Bundle配置 #

• 检查_Layout.cshtml，避免布局页与视图页重复引入相同脚本
• 若使用BundleConfig，确保Bundle中无重复打包脚本，且顺序正确：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-3.4.1.min.js"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/bootstrap.min.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui.min.js"));

之后在视图中通过@Scripts.Render("~/bundles/jquery")这类方式引用Bundle，不要手动重复编写script标签

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