Отключить ввод с клавиатуры?

Я использую Kendo UI для отображения в виде сетки набора данных из базы данных. К этой сетке у меня прикреплена панель поиска. Прямо сейчас следующий код ищет в сетке типы ввода в строку поиска:

searchBar = $("#search");
searchBar.keyup(() => {
    const term = searchBar[0].value;
    searchGrid(term, "#Grid", filters);
});

Как searchGrid работает, не имеет значения. Здесь важен тот факт, что событие привязано к keyup: по мере того, как пользователь вводит тип, я хочу, чтобы сетки фильтровались немедленно. Я не хочу, чтобы они вводили свой выбор, а затем нажимали кнопку для поиска - это не мой вариант использования. Мне нужно, чтобы он автоматически фильтровался по мере ввода.

Тем не менее, вот откуда мои проблемы. В сетке с постоянным объемом данных, хранящихся в ней, это не проблема. Работает отлично. Однако в конкретной сетке, над которой я сейчас работаю, более 1000 записей. Поскольку поиск привязан через keyup, он становится очень медленным, поскольку пытается фильтровать тысячи раз. Мне сказали, что я мог бы значительно улучшить это, если бы использовал debouncing, чтобы задерживать поиск примерно на 200 мс, пока пользователь вводит, вместо того, чтобы запускать его при каждом изменении буквы. Единственная проблема в том, что я вообще не могу заставить debounce работать. Вот функция противодействия, которую я вставил в свою кодовую базу:

function debounced(delay, fn) {
    let timerId;
    return function (...args) {
        if (timerId) {
            clearTimeout(timerId);
        }
        timerId = setTimeout(() => {
            fn(...args);
            timerId = null;
        }, delay);
    }
}

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

searchBar = $("#search");
searchBar.keyup(() => {
    const term = searchBar[0].value;
    debounced(200, searchGrid(term, "#Grid", filters));
});

searchBar = $("#search");
searchBar.keyup( () => debounced(200, searchGrid(searchBar[0].value, "#Grid", filters)));

Они просто нормально отфильтровали сетку и не вели себя иначе, чем первый предоставленный мной фрагмент. Так что, очевидно, дребезга вообще не было. Я попытался полностью удалить стрелочную функцию и просто передать отлаженную функцию в клавиатуру и получил эту новую ошибку:

Uncaught TypeError: fn is not a function

Так что я немного не понимаю, как использовать debouncing. Любая помощь будет оценена.


javascript kendo-grid searchbar kendo-ui debouncing
person ryansle    schedule 06.08.2019    source источник
comment
См. stackoverflow.com/questions/1909441/   -  person Richard    schedule 07.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

Я использовал этот код в предыдущих проектах

  var timeout;
  var delay = 500;   // 100 ms

  $('#searchTerm').keyup(function(e) {
    if(timeout) clearTimeout(timeout);
    timeout = setTimeout(function() { performSearch(); }, delay);
  });

  function performSearch() {
    var panelbar, filter, searchRegEx, $span;

    filter = $("#searchTerm").val();
    if (filter == lastFilter) return;

    if (filter.length < 3) return;  // only search 3 or more characters in searchTerm

    … the rest is unimportant … 

    lastFilter = filter;
  }
person Richard    schedule 07.08.2019
comment
Это было именно то, что мне было нужно. Спасибо. - person ryansle; 07.08.2019