页面加载时出现$(...).autocomplete is not a function错误求助

我在Web应用中添加了一个文本框，想要实现输入时搜索并展示数据的功能。参照教程实现后，页面加载时控制台出现**“$(...).autocomplete is not a function”**错误。我已经下载并引入了jQuery相关库，但错误仍未解决。

我的页面代码如下：

<link href="~/Addons/css/select2.min.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<link href="~/Addons/autocomplete/css/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.6.4.min.js"></script>
<script src="~/Addons/autocomplete/js/jquery-ui.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="~/Addons/js/select2.full.min.js"></script>

<div class="col-md-6">
  <input type="text" placeholder="Type the Item Name or Number Here" class="form-control" id="itemSerachBox" />
</div>

初始化脚本：

$(function () {
  $("#itemSerachBox").autocomplete({
    sourse: function (request, response) {
      $.ajax({
        url: '@Url.Action("GetSearchItems","Ajax")',
        dataType: "json",
        data: {
          search: $("itemSerachBox").val()
        },
        success: function (data) {
          response($.map(data, function (item) {
            return {
              label: item.ItemName_Number,
              value: item.ID
            };
          }));
        },
        error: function (xhr, status, error) {
          toastr.error("Invalid Item");
        }
      });
    }
  });
});

问题分析与解决方案 #

1. 检查库加载有效性与顺序 #

• 打开浏览器开发者工具「网络」面板，确认jquery-3.6.4.min.js和jquery-ui.js均成功加载（无404状态码），如果路径错误，修正为正确的文件路径。
• 确保页面没有重复引入jQuery，重复加载会覆盖带有UI扩展的jQuery实例，导致autocomplete方法丢失。

2. 修正代码拼写错误 #

代码中有两处关键拼写错误，直接导致功能异常：

• 配置项sourse应为**source**（拼写错误）；
• AJAX参数中$("itemSerachBox")缺少ID选择器前缀**#**，正确写法为$("#itemSerachBox")，更推荐使用jQuery UI提供的request.term获取当前输入值（更符合组件设计逻辑）。

修正后的脚本：

$(function () {
  $("#itemSerachBox").autocomplete({
    source: function (request, response) {
      $.ajax({
        url: '@Url.Action("GetSearchItems","Ajax")',
        dataType: "json",
        data: {
          search: request.term
        },
        success: function (data) {
          response($.map(data, function (item) {
            return {
              label: item.ItemName_Number,
              value: item.ID
            };
          }));
        },
        error: function (xhr, status, error) {
          toastr.error("Invalid Item");
        }
      });
    }
  });
});

3. 确认版本兼容性 #

确保使用的jQuery UI版本与jQuery 3.6.4兼容，部分旧版jQuery UI可能无法适配新版jQuery，建议更换为兼容的版本。

4. 验证脚本执行时机 #

确保初始化代码包裹在$(function(){...})中（你当前已正确实现），该函数会在DOM完全加载后执行，避免因DOM未就绪导致的元素获取失败。

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