Question

首次帖子所以请耐心等待...我一直在尝试将此处http://jqueryui.com/autocomplete/中的jQuery自动填充代码合并到我的项目中，以便我可以调整它。我一直在四处寻找解决方案，但没有成功。

我试过简单地将自动填充代码粘贴到记事本++中并保存为html文件并将其拉到我的浏览器（chrome）中但没有成功，并尝试使用jsfiddle相同的结果。我可以看到文本框，但不幸的是，当我输入任何内容时，自动完成功能都无法获取。

我不确定它是否与标签有关，或者我是否只是缺乏经验而且缺少一些明显的，经验丰富的开发人员会很快意识到这一点。

以下是我尝试从jQuery自动填充页面添加引用代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <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
});
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

我们非常感谢任何建议。仅供参考，我的工作的第一部分如下所示（我知道我需要添加某些标签但不确定哪些 - 即使在添加示例代码中显示的标签后我也不成功。

<!doctype html>
<html>
<head>
 <title>Your Team</title>
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">

Answer 1

您需要确保将库添加到jsfiddle

我已为您添加了链接（请注意左侧添加了jquery库）

http://jsfiddle.net/nz3Luyu8/

JAVASCRIPT

 $(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
});
});

HTML

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>

jQuery自动完成帮助

1 个答案: