当前位置：首页 > VUE

vue实现input模糊查询

2026-02-21 14:34:02VUE

实现模糊查询的基本思路

在Vue中实现input模糊查询，通常需要监听输入框的变化，对输入内容进行模糊匹配，并实时显示匹配结果。核心逻辑包括数据绑定、输入监听和过滤逻辑。

监听输入框变化

使用v-model双向绑定输入框的值，并通过watch或computed监听输入变化。watch适合处理异步操作，computed适合同步过滤。

<template>
  <input v-model="searchText" placeholder="输入查询内容">
  <ul>
    <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

使用computed实现过滤

通过computed属性实时计算匹配结果，利用JavaScript的字符串方法或正则表达式实现模糊匹配。

data() {
  return {
    searchText: '',
    originalList: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
  }
},
computed: {
  filteredList() {
    return this.originalList.filter(item => 
      item.name.toLowerCase().includes(this.searchText.toLowerCase())
    )
  }
}

使用watch处理异步查询

如果查询需要调用API或处理复杂逻辑，可以使用watch配合防抖函数优化性能。

data() {
  return {
    searchText: '',
    filteredList: [],
    timeout: null
  }
},
watch: {
  searchText(newVal) {
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.filterList(newVal)
    }, 300)
  }
},
methods: {
  filterList(query) {
    this.filteredList = this.originalList.filter(item =>
      item.name.toLowerCase().includes(query.toLowerCase())
    )
  }
}

使用第三方库增强模糊查询

对于更复杂的模糊查询需求，可以使用Fuse.js等专业模糊搜索库，提供更强的匹配能力。

import Fuse from 'fuse.js'

methods: {
  initFuse() {
    const options = {
      keys: ['name'],
      threshold: 0.4
    }
    this.fuse = new Fuse(this.originalList, options)
  },
  filterList(query) {
    this.filteredList = query ? this.fuse.search(query).map(r => r.item) : this.originalList
  }
},
mounted() {
  this.initFuse()
}

样式和交互优化

添加加载状态、空结果提示等交互细节，提升用户体验。

<template>
  <div class="search-container">
    <input v-model="searchText" placeholder="输入查询内容">
    <div v-if="loading" class="loading">查询中...</div>
    <ul v-else>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
      <li v-if="!filteredList.length">没有找到匹配结果</li>
    </ul>
  </div>
</template>