对模糊搜索做防抖处理

关注

最新推荐文章于 2026-08-06 07:50:57 发布 · 308 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

Vue3：搜索框输入防抖实现整理笔记搜索」这个场景在各种业务的系统中都是是非常常见的，比如电商平台的商品搜索、百度搜索、掘金搜索、google搜索......，只要是有内容呈现给用户的，都少不了搜索功能。输完关键字后手动触发搜索输入字符自动搜索第一种是由用户去决定何时进行搜索，没啥问题。第二种是通过监听用户录入的事件自动搜索，自动搜索能在一定程度上提升用户体验（比如在用户输入时关键词联想提示），同时也可能会带来问题，因为input事件触发是非常频繁的，比如下面这个示例：打开百度的搜索，找到输入框的dom，然后绑定一个input。阅读详情

设置模糊搜索的参数字段

data () {
  return {
    queryParams: {
      departmentId: null,
      page: 1, // 当前页码
      pagesize: 10,
      keyword: '' // 模糊搜索字段
    },
  }
}

双向绑定input输入框，监听值改变事件

<el-input
  v-model="queryParams.keyword"
  style="margin-bottom:10px"
  type="text"
  prefix-icon="el-icon-search"
  size="small"
  placeholder="输入员工姓名全员搜索"
  @input="changeValue"
/>

值改变查询数据

changeValue() {
  this.queryParams.page = 1
  this.getEmployeeList()
}

值改变查询数据-支持防抖查询

changeValue() {
  // 单位时间内只执行最后一次
  // this的实例上赋值了一个timer的属性
  clearTimeout(this.timer) // 清理上一次的定时器
  this.timer = setTimeout(() => {
    this.queryParams.page = 1
    this.getEmployeeList()
  }, 300)
}