easyAutocomplete 函数停止我的 keyup 处理程序

Question

我正在编写代码来自动完成我网站上的城市搜索。问题是 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 gem 但它只不过是 jQuery 的 easyAutocomplete 插件的包装器。你能告诉我当我将 options 数组传递给 easyAutocomplete 函数时会发生什么吗？

Answer 1

您可能缺少库。我让它与你的 JavaScript 一起工作：我做了一个名为查找的文件夹。在文件夹中我制作了两个文件：

test.html
lookup.js
在 http://easyautocomplete.com/files/EasyAutocomplete-1.3.5.zip

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);
                }
            });
        }
    });
});

就是这样。应该工作正常。希望对你有帮助。

Answer 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);

现在应该可以按照您想要的方式工作了。 如果答案对您有帮助，请单击向上箭头。这有助于我的排名。此外，如果它已为您解决，请单击“这解决了我的问题”。谢谢，杰里米

easyAutocomplete 函数停止我的 keyup 处理程序

easyAutocomplete function stops my keyup handler

javascript

ajax

jquery

jquery-ui-autocomplete