当前位置：首页 > VUE

vue实现模糊查询搜索

2026-01-20 21:08:16VUE

实现模糊查询的基本思路

在Vue中实现模糊查询通常需要结合输入框和列表渲染，通过监听输入框的变化实时过滤数据。核心是利用JavaScript的字符串方法或正则表达式匹配关键词。

使用计算属性实现

定义一个计算属性，根据输入框的值过滤数组。这种方法响应式且高效，适合中小型数据量。

vue实现模糊查询搜索

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      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.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用自定义方法实现

对于更复杂的模糊匹配逻辑，可以封装独立的方法处理过滤。

methods: {
  fuzzySearch(list, query) {
    if (!query) return list
    const lowerQuery = query.toLowerCase()
    return list.filter(item => 
      item.name.toLowerCase().indexOf(lowerQuery) !== -1
    )
  }
}

支持多字段搜索

扩展过滤逻辑使其支持对象多个属性的匹配。

vue实现模糊查询搜索

computed: {
  filteredList() {
    const query = this.searchQuery.toLowerCase()
    return this.originalList.filter(item => 
      Object.values(item).some(
        val => String(val).toLowerCase().includes(query)
      )
    )
  }
}

使用第三方库增强功能

对于更强大的模糊搜索，可以引入专门库如fuse.js：

import Fuse from 'fuse.js'

// 在组件中
methods: {
  initFuse() {
    this.fuse = new Fuse(this.originalList, {
      keys: ['name', 'category'],
      threshold: 0.4
    })
  },
  searchWithFuse(query) {
    return query ? this.fuse.search(query).map(r => r.item) : this.originalList
  }
}

性能优化建议

对于大型数据集，考虑以下优化：

添加防抖处理输入事件
使用Web Worker进行后台过滤
对静态数据预建搜索索引
实现分页加载结果

完整示例代码

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="onSearchInput"
      placeholder="模糊搜索..."
    >
    <ul v-if="filteredItems.length">
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }} ({{ item.category }})
      </li>
    </ul>
    <p v-else>无匹配结果</p>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      originalItems: [...], // 原始数据
      filteredItems: []
    }
  },
  created() {
    this.debouncedSearch = _.debounce(this.doSearch, 300)
  },
  methods: {
    onSearchInput() {
      this.debouncedSearch()
    },
    doSearch() {
      const query = this.searchQuery.trim().toLowerCase()
      this.filteredItems = query 
        ? this.originalItems.filter(item =>
            item.name.toLowerCase().includes(query) ||
            item.category.toLowerCase().includes(query)
          )
        : this.originalItems
    }
  }
}
</script>