尝试将 EasyComplete 插件(版本 1.3.5)包含到我 future 的网站中,我用最简单的输入标签(“基本”标签)对其进行了测试,但没有成功......我没有看到任何自动完成列表在我的输入标签中输入字母时。
这是我的 html 文件:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./EasyAutocomplete/easy-autocomplete.min.css">
<link rel="stylesheet" href="./EasyAutocomplete/easy-autocomplete.themes.min.css">
<script src="./EasyAutocomplete/jquery.easy-autocomplete.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<input id="basics" />
<script>
$(document).ready(function() {
var options = {
data: ["blue", "green", "pink", "red", "yellow"]
};
$("#basics").easyAutocomplete(options);
});
</script>
</body>
</html>
我注意到,使用 Safari Web Inspector,我的页面有 2 个问题:
_ 1 来自 html 文件: '$("#basics").easyAutocomplete(options);不是一个函数'
_ 1 来自 jquery.easy-autocomplete.min.js 文件:“找不到变量 jQuery”(最后一行)
有人可以解释一下我在这个非常基本的例子中做错了什么吗?
请您参考如下方法:
您的 JavaScript 包含内容顺序错误。您需要首先包含 jQuery,然后包含自动完成内容。
这是代码的演示,其中包含的内容按正确的顺序排列:
$(document).ready(function() {
var options = {
data: ["blue", "green", "pink", "red", "yellow"]
};
$("#basics").easyAutocomplete(options);
});
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<input id="basics">