用户完成输入后调用搜索功能

Question

我有以下问题，

我的 Javascript 文件中有这段代码，

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

这会清除搜索发生后返回的行，通过发生的事件获取搜索词，然后调用 getCases。

此代码块调用另一个异步函数 getCases，它从我们的服务器获取响应并取回结果。 html 有 onChange = {termChange}。然而，这就是问题所在。每次您键入时，它都会调用它，导致它在搜索时触发 8 次。这会导致不需要的搜索结果，并且有时会出现重复。我需要想办法在用户完成输入后调用此事件。我试过设置超时，甚至使用去抖动。但是，我都无法开始工作以解决问题。对此的任何帮助都是巨大的。谢谢！

它必须在用户完成输入而没有任何动作或按钮按下时自动搜索。

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

它抛出一个错误，它找不到未定义的目标。所以它不会传递事件，我无法想出办法做到这一点并让它发挥作用，因此我遇到了去抖动问题。

Answer 1

尝试使用 on blur 事件，而不是每次用户键入时都调用事件。

Answer 2

Debounce 是 100% 可行的方法 - 它准确描述了您要执行的操作。也许您需要更长的计时器？还是debounce功能有问题？

我在我维护的网站的搜索框上使用了 250 毫秒计时器 - 但如果速度较慢 API 或者如果它重写了主要页面，您可能需要更大一些。

还要检查以确保输入确实发生了变化...例如如果新输入 = 旧输入

，则存储最后搜索的词并在搜索函数中中止它

Answer 3

使用 onkeyup 事件。

HTML:

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

JS:

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

}

用户完成输入后调用搜索功能

Call search function when user is done Typing

javascript

events

event-handling

salesforce

salesforce-lightning