Vue/Vuetify 如何实现输入实时搜索过滤而非按回车键触发查询

改造逻辑说明 #

将原有的回车触发后端请求的搜索逻辑，调整为「初始化预拉全量数据 + 前端实时匹配过滤」的本地搜索模式，无需每次搜索触发接口请求。

具体改造步骤 #

• 1、补充数据字段定义
  在原data配置中新增全量数据存储相关字段，示例如下：

data () {
  return {
    search: '', // 默认值调整为空字符串，避免空值匹配报错
    allItems: [], // 存储预拉取的全量待搜索原始数据
  }
}

• 2、页面初始化阶段预拉全量数据
  在生命周期钩子中调用接口拉取所有待搜索的全量数据，存入allItems字段：

async created() {
  // 替换为实际的全量数据接口请求逻辑
  const result = await fetch('/api/your-full-data-path').then(res => res.json())
  this.allItems = result
}

• 3、修改搜索输入框配置，移除回车触发事件
  原有的@keyup.enter绑定可以直接删除，只保留输入框和search变量的双向绑定即可：

<v-text-field
  v-model="search"
  placeholder="输入关键词搜索"
/>

• 4、新增计算属性实现实时过滤
  通过计算属性自动监听search输入值的变化，实时返回匹配的结果，直接用于页面列表渲染：

computed: {
  filteredList() {
    const keyword = this.search.trim().toLowerCase()
    // 搜索词为空时返回全部数据
    if (!keyword) return this.allItems
    // 可自定义匹配规则，示例为匹配标题、描述两个字段，支持大小写不敏感
    return this.allItems.filter(item => {
      return item.title.toLowerCase().includes(keyword) || item.desc.toLowerCase().includes(keyword)
    })
  }
}

之后页面渲染搜索结果时直接循环filteredList即可。

可选优化建议 #

• 如果数据量较大（≥1000条），可以添加300ms左右的防抖逻辑，避免输入过程中频繁触发计算导致页面卡顿
• 可新增关键词高亮逻辑，标记出搜索结果中匹配到的关键词，提升用户体验
• 若仍需要保留回车触发的交互逻辑，可以保留@keyup.enter绑定，复用上述过滤逻辑即可

注意：如果全量数据量级超过5000条，建议降级为后端接口搜索+防抖的方案，避免前端计算压力过大导致页面卡顿。

内容的提问来源于stack exchange，提问作者Pianoc