jQuery autocomplete - Uncaught TypeError: undefined is not a function

Question

我正在尝试在我的搜索文本框中添加 jquery 自动完成功能，但由于某些原因我无法使用它。看起来我已经加载了所有必需的 jquery 并且版本没有差异。我已经尝试了所有（至少我找到的那个）建议的解决方案，但没有一个有效。

我的 html:

 <input type="search" name="searchTerm" 
data-test-autocomplete="@Url.Action("AutoComplete")" />

我的 js:

$(function() {
  var createAutoComplete = function() {
    var $input = $(this);

    var options = {
      source: $input.attr("data-test-autocomplete")
    };

    $input.autocomplete(options);
  };


  $("input[data-test-autocomplete]").each(createAutoComplete);

});

bundle 在正文末尾的 _Layout.cshtml 中被调用：

  bundles.Add(new ScriptBundle("~/bundles/test").Include(
              "~/Scripts/jquery-{version}.js",
              "~/Scripts/jquery-ui-{version}.js",
              "~/Scripts/jquery.unobtrusive*",
              "~/Scripts/jquery.validate*",
              "~/Scripts/test.js"));

正在加载的脚本：

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/test.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

提前致谢。

Answer 1

未定义的显然是.autocomplete jQuery函数。请查看您问题的 "Scripts being loaded" 部分 jQuery UI 完全缺失。

你正确地将它包含在你的包中，如 "~/Scripts/jquery-ui-{version}.js" 所以失败的唯一可能解释是 jQuery UI 脚本文件从该路由中丢失（或者您在布局中渲染 worng 包或查看 Razor 代码）。

jQuery autocomplete - Uncaught TypeError: undefined is not a function

jQuery autocomplete - Uncaught TypeError: undefined is not a function

javascript

jquery

jquery-ui

autocomplete

asp.net-mvc-5