我正在编写代码来自动完成我网站上的城市搜索。问题是 ajax 函数一旦被调用，就会阻止对 keyup 事件的后续调用。实际上，一旦输入中达到三个字符，ajax 调用就会从我正在使用的 API 中获取数据（在这一点上一切正常），但随后发生了一些事情，keyup 事件无法再次调用（我的控制台。日志未被触发）。这是我的 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 gem，但它只不过是 jQuery 的 easyAutocomplete 插件的包装器。options你能告诉我当我将数组传递给函数时会发生什么吗easyAutocomplete？
2 回答
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
好的。尝试这个。将 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);
现在应该按照你想要的方式工作。如果对您有帮助，请点击向上箭头找到答案。这有助于我的排名。此外，如果它已为您解决，请单击“这解决了我的问题”。
慕莱坞森
TA贡献1810条经验 获得超4个赞
您可能缺少库。我让它与你的 JavaScript 一起工作：我创建了一个名为 lookup 的文件夹。在文件夹中我制作了两个文件：
测试.html
查找.js
从http://easyautocomplete.com/files/EasyAutocomplete-1.3.5.zip的文件夹中下载并解压缩 EasyAutocomplete-1.3.5 的代码
测试.html
<!DOCTYPE html>
<html>
<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>
查找.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);
}
});
}
});
});
就是这样。应该工作正常。希望这对你有帮助。
添加回答
举报
0/150
提交
取消