jQuery, отображение текста внутри ввода, если входной текст содержит более двух символов, работает более одного раза. (Каждые два символа)

Question

У меня есть функция jQuery, которую я хочу выполнить, когда поле ввода текста содержит более двух символов:

$('#textInput').on('input', displaySuggestions);

function displaySuggestions(){
    if($('#textInput')[0].value.length > 2){
        let searchValue = $('#textInput')[0].value;
        $.myObj.getResults( searchValue, (results) => {            
          console.log(results); 
      });
    }
}

Функция работает хорошо, если я не использую функцию getResults, который мне нужен. Это из плагина, который выглядит следующим образом:

(function($) {

    $.myObj = {

        getResults: function(value, callBack){
            var req = $.ajax({
                url:'http://api.my/api/name' + value
            });

             req.done(callBack);
        }
    };

}(jQuery));

Функция должна регистрировать результаты, которые JSON данные из вызова API. Он должен возвращать результаты только один раз, когда в поле ввода текста добавлено более двух символов. Однако при использовании функции getResults результаты записываются каждые два символа, например, если я напишу слово из шести букв, результаты будут записаны 3 раза. Мне не разрешено вносить изменения в функцию getResults, но если нет решения, я бы подумал. Не уверен, как обернуть мою голову вокруг этого. Заранее спасибо!

Answer 1

Если вы хотите вернуть результаты только один раз, используйте соответствующий метод off для удаления обработчика.

function displaySuggestions(){
    if ($('#textInput')[0].value.length > 2) {
        let searchValue = $('#textInput')[0].value;
        $.myObj.getResults( searchValue, (results) => {            
          console.log(results); 
      });
      $('#textInput').off('input', displaySuggestions);
    }
}

Если вы хотите вызывать результаты каждый раз, когда ввод превышает 2 символа (например, пользователь удаляет ввод и перепечатывает), затем добавляет защиту вокруг вызова getResults ().

let displayResults = true;
function displaySuggestions() {
    let searchValue = $('#textInput')[0].value;
    if (displayResults) {
        if (searchValue.length > 2) {
            displayResults= false;
            $.myObj.getResults( searchValue, (results) => {
                console.log(results); 
            });
        }
    } else if (searchValue.length < 2) {
        displayResults = true;
    }
}