JQuery UI 自动完成在 MVC 视图中不起作用答案

【问题标题】：JQuery UI autocomplete not working in MVC ViewJQuery UI 自动完成在 MVC 视图中不起作用
【发布时间】：2017-05-29 21:48:03
【问题描述】：

我正在考虑在 Asp.net 视图中为我的一个输入字段添加自动完成功能，因此我尝试了 Jquery UI 中的示例并将代码粘贴到其中一个 .cshtml 视图中：

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var data = ["Boston Celtics", "Chicago Bulls", "Miami Heat", "Orlando Magic", "Atlanta Hawks"];
$("#seed_one").autocomplete({source:data});
});
</script>
</head>

<body>
<input id="seed_one" type="text" name="seed_one" />
</body>
</html>

但是，当我运行应用程序并开始在输入字段中输入内容时，没有显示任何建议。代码有什么问题？

【问题讨论】：

检查您的浏览器控制台以查看是否有任何脚本错误。您的代码工作正常jsbin.com/livajenuco/edit?html,js,output
这段代码运行良好jsfiddle.net/ajays871/j6p0ogjt
将document.ready 脚本放在body 标签的末尾
我在 Chrome 调试中收到此错误：未捕获的 TypeError: $(...).autocomplete is not a function at HTMLDocument. (Create:151) at fire (jquery-1.12 .4.js:3232) 在 Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362) 在 Function.ready (jquery-1.12.4.js:3582) 在 HTMLDocument.completed (jquery-1.12. 4.js:3617)
看看你的 jquery 版本，那不是旧版本吗？你在加载另一个 jquery 吗？要么是错误的版本，要么是你调用得太早了。

标签： javascript asp.net asp.net-mvc asp.net-core

【解决方案1】：

我建议您同时下载 jQuery 和 jQuery UI，而不是使用其 CDN。使用最新的 jQuery 版本的问题是你永远不知道它是什么版本，或者它是否与当前的 jQuery UI 版本兼容。

使用最新版本的jQuery URL，其版本会不时更改，有时会导致破坏性更改，或与外部库（如jQuery UI）产生不兼容。

另外，这是一个自动完成的工作小提琴： https://jsfiddle.net/zymh9xk9/

$(document).ready(function(){
  var data = ["Boston Celtics", "Chicago Bulls", "Miami Heat", "Orlando Magic", "Atlanta Hawks"];
  $("#seed_one").autocomplete({source:data});
});

在此处下载最新的 jQuery 生产（稳定）版本： https://jquery.com/download/

以及 jQuery UI： https://jqueryui.com/download/

【讨论】：

我仍然收到错误消息，说自动完成不是 HTMLDocument 的功能。。这是 Chrome 中出现的错误截图：link
你是在 jQuery 本身之后调用 jQuery UI 吗？仅当您的 jQuery UI 未加载时才会发生此错误。您可以尝试检查您的页面并检查您的文件是否正在加载到您的“元素”标签中（如果您使用的是 Google Chrome）。
查看了元素选项卡。似乎已加载 JQuery，但未加载 JQuery UI。为什么？我已经通过 Bower 安装了 JQuery Ui，并在像这样链接 JQuery 之后立即链接它：这是截图元素标签：link
使用 bower 安装的库位于 bower 组件文件夹中：bower_components/jquery-ui/jquery-ui.min.js。如果您当前的文件是 bower_components 文件夹的同级文件，则可以使用上述源作为 jQuery UI 文件的绝对路径。
所以你有 cdn jquery UI 链接（在你上面的 html 中），还有一个本地链接？这会是我认为的问题吗？