jquery 中的自动完成功能不起作用，但 jquery 运行正常答案

【问题标题】：Autocomplete in jquery is not working but jquery is functioning properlyjquery 中的自动完成功能不起作用，但 jquery 运行正常
【发布时间】：2017-02-01 05:07:00
【问题描述】：

这是我的代码：-

<html>
<head>


<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$( function() {
 var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
$( "#tags" ).autocomplete({
  source: availableTags
});
} );
$(document).ready(function($) {
alert("js is working");
});
</script>
</head>
<body>
<div class="ui-widget">
 <label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>

它确实给了我警报 js 正在工作，这意味着我的 jquery 正在工作，但问题是我的自动完成功能不起作用。当我检查元素时，我从 chrome 收到此错误未捕获的类型错误：$(...).autocomplete 不是函数在 HTML 文档。 (test.html:41) 在 j (jquery.min.js:2) 在 k (jquery.min.js:2)(匿名) @ test.html:41j @ jquery.min.js:2k @ jquery.min .js:2

提前致谢：-)

【问题讨论】：

您错过了脚本中的 jquery ui 导入。 $.autocomplete 是 ui 的一部分
原因可能是您包含在 head 中的参考文件的顺序。Jquery 库文件应该在顶部，然后是 Jquery-ui，然后是您的自动完成。
以下链接将解决您的问题。 stackoverflow.com/questions/39371754/…
@Arvind 您所说的 UI 导入是什么意思？我用google cdn还不够。如果没有那么请告诉我如何导入jquery ui
看看下面Aman给出的帖子，他使用了jquery-ui .js和.css

标签： jquery

【解决方案1】：

只需在部分代码中包含以下 2 行即可。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

以下是完整的工作源代码。

<html>
<head>


<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$( function() {
 var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
$("#tags").autocomplete({
  source: availableTags
});
} );
$(document).ready(function($) {
alert("js is working");
});
</script>
</head>
<body>
<div class="ui-widget">
 <label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>

【讨论】：

它成功了。但是你能告诉我我的错误是什么吗？
是的，当然。 “.autocomplete”是 jQuery-ui 的一个功能。 jQuery 处理 DOM 操作，而 jQuery-ui 处理 DOM 之上的 UI 操作。您已包含 jquery js/css 但未包含 jquery-ui.js/css。由于自动完成是 DOM 之上的一项高级功能，它驻留在 jquery-ui 中
请查看stackoverflow.com/questions/1775990/… 答案以供进一步参考。
非常感谢。我也想用文字显示图片不知道怎么做？

【解决方案2】：

检查这个自动完成，这可能对你有帮助

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

【讨论】：