easyAutocomplete 函数停止我的 keyup 处理程序
我正在编写代码来自动完成我网站上的城市搜索。问题是 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回答
-
蝴蝶不菲
好的。尝试这个。将 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);现在应该按照你想要的方式工作。如果对您有帮助，请点击向上箭头找到答案。这有助于我的排名。此外，如果它已为您解决，请单击“这解决了我的问题”。 -
慕莱坞森
您可能缺少库。我让它与你的 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); } }); } });});就是这样。应该工作正常。希望这对你有帮助。
随时随地看视频慕课网APP
相关分类
JavaScript