Функция easyAutocomplete останавливает мой обработчик ввода

ProgramBox

Функция easyAutocomplete останавливает мой обработчик ввода

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #ajax #jquery-ui-autocomplete

#javascript #jquery #ajax #jquery-ui-автозаполнение

Вопрос:

Я пишу код для автозаполнения поиска по городу на моем сайте. Проблема в том, что функция ajax после вызова блокирует последующие вызовы события keyup. На практике, как только во входных данных набирается три символа, вызов ajax принимает данные из используемого мной API (на этом этапе все в порядке), но затем что-то происходит, и событие ввода снова не вызывается (моя консоль.журнал не запускается).

это мой 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()   "amp;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 функция блокирует последующие вызовы ввода. Происходит что-то, чего я не понимаю. easyAutocomplete это жемчужина Rails, но это не что иное, как оболочка для плагина easyAutocomplete от jQuery. Можете ли вы сказать мне, что происходит, когда я передаю свой options массив easyAutocomplete функции?

Ответ №1:

ОК. Попробуйте это. Измените lookup.js быть просто следующим:

 let options = {
    minCharNumber: 3,
    url: function (phrase) {
        return "https://nominatim.openstreetmap.org/search?q="   $("#prova").val()   "amp;format=json";
    },

    getValue: "display_name",
    list: {
        match: {
            enabled: true
        }
    }
};

$("#prova").easyAutocomplete(options);

Теперь должно работать так, как вы хотите. Пожалуйста, нажмите на стрелки вверх к ответам, если они вам помогли. Это помогает моему ранжированию. Кроме того, если он исправил это для вас, пожалуйста, нажмите на «Это исправило мою проблему».
Спасибо,
Джереми

1. Это идеально! Но можете ли вы объяснить, почему мой код был неправильным?

2. В него встроен AJAX. Цикл не позволял ему работать до тех пор, пока не будут введены три символа. Я следил за документами от поставщиков данных — удаленный пример на easyautocomplete.com/guide#sec-data-remote и получил минимальный номер в github.com/pawelczak/EasyAutocomplete/issues/293 .

Ответ №2:

Возможно, вам не хватает библиотек. Я заставил его работать с вашим JavaScript: я создал папку с именем lookup. В папке я создал два файла:

test.html
lookup.js
Скачал и распаковал код для EasyAutocomplete-1.3.5 в папке из 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()   "amp;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);
                }
            });
        }
    });
});

Вот и все. Должно работать нормально. Надеюсь, это помогло вам.