easyAutocomplete函数停止我的密钥处理程序
我正在写一个代码来自动完成我网站上的城市搜索。问题是ajax函数一旦调用，就会阻止对keyup事件的后续调用。实际上，只要在输入中达到三个字符，ajax调用就会从我使用的API中获取数据(在这一点上一切都很好)，但是会发生一些事情，并且不能再次调用keyup事件(我的console.log不会被触发)。
这是我的HTML代码：
<input type="text" id="prova" class="form-control search-slt" placeholder="Enter name1..." data-behavior="autocomplete" />这是我的JS代码：
$(function () {
var minlength = 3;
$('#prova').keyup(function (e) {
var that = this,
value = $(this).val();
console.log("keyup");
if (value.length >= minlength ) {
searchRequest = $.ajax({
type: "GET",
url: "https://nominatim.openstreetmap.org/search?q=" + $("#prova").val() + "&format=json",
//async: false,
success: function(results) {
console.log(results);
var aList = results;
var aOptions = [];
for (i = 0; i < aList.length; i++) {
//optKey = aList[i].geometry.coordinates[0] + ',' + aList[i].geometry.coordinates[1];
optLabel = aList[i].display_name;
aOptions.push(optLabel);
}
var options = {
data: aOptions
};
console.log(options);
$("#prova").easyAutocomplete(options);
}
});
}
});})；
我调试了代码，并意识到easyAutocomplete函数是阻止随后的keyup调用的函数。发生了我不明白的事。easyAutocomplete是Rails的创业板，但它不过是jQuery的easyAutocomplete插件的包装器。当我将options数组传递给easyAutocomplete函数时，您能告诉我发生了什么吗？
回答 2
Stack Overflow用户
发布于 2020-10-14 23:15:29
好的。尝尝这个。将lookup.js更改为以下内容：
let options = {
minCharNumber: 3,
url: function (phrase) {
return "https://nominatim.openstreetmap.org/search?q=" + $("#prova").val() + "&format=json";
},
getValue: "display_name",
list: {
match: {
enabled: true
}
}
};
$("#prova").easyAutocomplete(options);现在该按你想的方式工作了。这有助于我的排名。另外，如果它为您修复了它，请点击“这解决了我的问题”。谢谢，杰里米
Stack Overflow用户
发布于 2020-10-14 21:52:20
你可能错过了图书馆。我让它与您的JavaScript一起工作:我创建了一个名为查找的文件夹。在文件夹中，我创建了两个文件：
- test.html
- lookup.js
- Downloaded并从http://easyautocomplete.com/files/EasyAutocomplete-1.3.5.zip
中解压缩了EasyAutoComplet-1.3.5文件夹中的代码
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lookup</title>
<link rel="stylesheet" href="EasyAutocomplete-1.3.5/easy-autocomplete.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="prova" class="form-control search-slt" placeholder="Enter name1..." data-behavior="autocomplete" />
<script src="EasyAutocomplete-1.3.5/jquery.easy-autocomplete.min.js"></script>
<script src="lookup.js" defer></script>
</body>
</html>lookup.js
$(function () {
var minlength = 3;
$('#prova').keyup(function (e) {
var that = this,
value = $(this).val();
console.log("keyup");
if (value.length >= minlength) {
searchRequest = $.ajax({
type: "GET",
url: "https://nominatim.openstreetmap.org/search?q=" + $("#prova").val() + "&format=json",
//async: false,
success: function (results) {
console.log(results);
var aList = results;
var aOptions = [];
for (i = 0; i < aList.length; i++) {
//optKey = aList[i].geometry.coordinates[0] + ',' + aList[i].geometry.coordinates[1];
optLabel = aList[i].display_name;
aOptions.push(optLabel);
}
var options = {
data: aOptions
};
console.log(options);
$("#prova").easyAutocomplete(options);
}
});
}
});
});就这样。应该能正常工作。希望这能帮到你。
https://stackoverflow.com/questions/64361602
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号