Uncaught TypeError: $(...).easyAutocomplete is not a function
Uncaught TypeError: $(...).easyAutocomplete is not a function
我正在使用 Node js 和 express 创建一个网络应用程序。对于自动完成,我使用名为 easy-autcomplete 的第三方节点模块。我已经按照文档进行操作并包含了所有文件,但是我收到以下错误
Uncaught TypeError: $(...).easyAutocomplete is not a function
at HTMLDocument.<anonymous> (post-property.js:289)
at mightThrow (jquery-3.3.1.js:3534)
at process (jquery-3.3.1.js:3602)
post-property.js
$(function(){
let countries = [
{"name": "Afghanistan", "code": "AF"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},
..
..
]
var options = {
data: countries,
getValue: "name",
list: {
match: {
enabled: true
}
}
};
$("#provider-json").easyAutocomplete(options);
});
post-property.hbs
<div class="row">
..
..
</div>
<script src="/javascripts/post-property.js"></script>
<script src="/scripts/jquery.easy-autocomplete.min.js"></script>
<link rel="stylesheet" href="/scripts/easy-autocomplete.css">
<link rel="stylesheet" href="/scripts/easy-autocomplete.themes.min.css">
app.js
...
app.use('/scripts', express.static(__dirname + '/node_modules/easy-autocomplete/dist/'));
...
我检查了各种解决方案,在这些解决方案中我不得不从节点模块文件夹中移动我的文件,但错误仍然存在。
您需要在自定义代码之前加载插件/库,否则它将不存在。 jQuery
也需要包含在这两个 scripts
之前。
尝试以下操作:
<script src="/scripts/jquery.easy-autocomplete.min.js"></script>
<script src="/javascripts/post-property.js"></script>
您应该将脚本和 css 移动到您自己的脚本之前以便于自动完成。
let countries = [
{"name": "Afghanistan", "code": "AF"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},
]
var options = {
data: countries,
getValue: "name",
list: {
match: {
enabled: true
}
}
};
$("#basics").easyAutocomplete(options);
<head>
<link rel="stylesheet" href="/scripts/easy-autocomplete.css">
<link rel="stylesheet" href="/scripts/easy-autocomplete.themes.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<script src="/javascripts/post-property.js"></script>
</head>
<body>
<div class="row">
<input id="basics" />
</div>
</body>
然后不要忘记包含 jQuery 文档中提到的脚本
我正在使用 Node js 和 express 创建一个网络应用程序。对于自动完成,我使用名为 easy-autcomplete 的第三方节点模块。我已经按照文档进行操作并包含了所有文件,但是我收到以下错误
Uncaught TypeError: $(...).easyAutocomplete is not a function
at HTMLDocument.<anonymous> (post-property.js:289)
at mightThrow (jquery-3.3.1.js:3534)
at process (jquery-3.3.1.js:3602)
post-property.js
$(function(){
let countries = [
{"name": "Afghanistan", "code": "AF"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},
..
..
]
var options = {
data: countries,
getValue: "name",
list: {
match: {
enabled: true
}
}
};
$("#provider-json").easyAutocomplete(options);
});
post-property.hbs
<div class="row">
..
..
</div>
<script src="/javascripts/post-property.js"></script>
<script src="/scripts/jquery.easy-autocomplete.min.js"></script>
<link rel="stylesheet" href="/scripts/easy-autocomplete.css">
<link rel="stylesheet" href="/scripts/easy-autocomplete.themes.min.css">
app.js
...
app.use('/scripts', express.static(__dirname + '/node_modules/easy-autocomplete/dist/'));
...
我检查了各种解决方案,在这些解决方案中我不得不从节点模块文件夹中移动我的文件,但错误仍然存在。
您需要在自定义代码之前加载插件/库,否则它将不存在。 jQuery
也需要包含在这两个 scripts
之前。
尝试以下操作:
<script src="/scripts/jquery.easy-autocomplete.min.js"></script>
<script src="/javascripts/post-property.js"></script>
您应该将脚本和 css 移动到您自己的脚本之前以便于自动完成。
let countries = [
{"name": "Afghanistan", "code": "AF"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},
]
var options = {
data: countries,
getValue: "name",
list: {
match: {
enabled: true
}
}
};
$("#basics").easyAutocomplete(options);
<head>
<link rel="stylesheet" href="/scripts/easy-autocomplete.css">
<link rel="stylesheet" href="/scripts/easy-autocomplete.themes.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<script src="/javascripts/post-property.js"></script>
</head>
<body>
<div class="row">
<input id="basics" />
</div>
</body>
然后不要忘记包含 jQuery 文档中提到的脚本