在 jquery 中搜索 typeahead 触发时间

Posted 2023-05-08

【中文标题】在 jquery 中搜索 typeahead 触发时间

【英文标题】：Search typehead trigger time in jquery

【发布时间】：2021-09-02 18:52:43

【问题描述】：

有什么方法可以在 laravel vuejs 中每 3 秒触发一次事件，但我一直在我的脚本中使用 Jquery。问题是当我搜索和输入任何字符串时，因为我一直在使用 @987654321 @ 在输入类型上，它将触发我输入的每个字符的事件。我想要的，它会在你停止输入至少 3 秒时触发，否则如果你继续输入它不会触发事件，有什么办法可以实现吗？这对我很有帮助。

目前我已经尝试过settimeout，但每次我输入都会在设置时间后得到多个结果。

<input type="text" class="form-control required-field" name="driver_fullname" placeholder="Enter fullname" v-model="formFields.fullname" v-on:keyup="typehead"/>

脚本

   typehead()
        let vm = this;
        let driveInfo = vm.formFields.fullname;

         setTimeout(() => 
            axios.put(BASE_URL + '/transportation/driver/autoComplete/' + driveInfo).then(response => 
            console.log(response.data);
            );
        , 500);
    ,

【参考方案1】：

听起来您真正想要的是消除用户输入的抖动，以防止每次击键时调用 API。

查看https://www.npmjs.com/package/debounce

如果您真的想在用户停止输入后延迟三秒，一种方法是使用clearTimeout()。

将typeaheadTimeout: null 添加到您的组件data。

然后：

typehead() 
  let driveInfo = this.formFields.fullname;

  if (this.typeaheadTimeout) 
    clearTimeout(this.typeaheadTimeout);
  

  this.typeaheadTimeout = setTimeout(() => 
    axios.put(BASE_URL + '/transportation/driver/autoComplete/' + driveInfo).then(response => 
      console.log(response.data);
    );
  , 3000);
,