Функция поиска звонков, когда пользователь закончил.

Question

У меня следующая проблема,

У меня есть этот фрагмент кода в моем файле Javascript,

    termChange(evt) {
        this.rows = [];
        this.searchTerm = evt.target.value;
        this.getCases();
    }

Это очищает строки, возвращаемые после того, как поиск происходит, получает поисктермин через происходящее событие и затем вызывает getCases.

Этот блок кода вызывает другую асинхронную функцию, getCases, которая получает ответ от нашего сервера и возвращает результаты обратно.HTML имеет onChange = {termChange}.Однако здесь возникает проблема. Каждый раз, когда вы набираете текст, он вызывает его, вызывая его срабатывание 8 раз при поиске.Это приводит к нежелательным результатам поиска и дублируется время от времени.Мне нужно найти способ вызвать это событие после того, как пользователь закончил печатать.Я попытался установить TimeTimeouts и даже использовать debounce.Однако ни я не мог добраться до работы, чтобы решить проблему.Любая помощь с этим будет огромной.Спасибо!

Он должен автоматически искать, когда пользователь заканчивает набор текста без каких-либо движений или нажатий кнопок.

    debounce(func, wait, immediate) {
        var timeout;
        return function executedFunction() {
          var context = this;
          var args = arguments;
          var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
            };
          var callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
        };
    }

Это функция debounce, которую я написал.Однако, когда я пытался сделать что-то вроде

    handleTermChange = this.debounce(this.termChange(), 1000, false);

, я получаю ошибку, что не могу найти цель неопределенной.Таким образом, оно не проходит через событие, и я не мог придумать, как это сделать и заставить его работать, отсюда моя проблема с debounce.

Answer 1

Debounce - это 100% путь, он точно описывает, что вы пытаетесь сделать.Может быть, вам нужен более длинный таймер?Или что-то не так с функцией debounce?

Я использую таймер 250 мс на странице поиска, которую я поддерживаю, - но если это более медленный API или если он переписывает основные страницы, вы, вероятно, захотите перейтибольше.

Также убедитесь, что ввод действительно изменился ... например, сохраните последний искомый термин и прервите его в функции поиска, если новый ввод = старый ввод

Answer 2

Использовать событие onkeyup.

HTML:

<input type="text" onkeyup="termChange(event)">

JS:

var timeout = null;
function termChange(evt) {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
          //Your code
    }, 500);

}

Answer 3

Попробуйте использовать событие размытия вместо вызова события каждый раз, когда пользователь вводит.