vue实现模糊搜索功能

实现模糊搜索的基本思路

在Vue中实现模糊搜索功能通常需要结合输入框的事件监听、数据过滤以及实时展示。核心是利用JavaScript的字符串方法或正则表达式对数据进行匹配筛选。

使用计算属性实现模糊搜索

通过计算属性对数据进行过滤是最常见的方式，适合中小型数据量的场景。定义一个搜索关键词，利用filter和includes方法筛选数据。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用第三方库优化搜索

对于更复杂的模糊搜索需求（如拼音搜索、权重匹配），可以引入第三方库如fuse.js。它提供更强大的模糊搜索算法。

import Fuse from 'fuse.js'

export default {
  data() {
    return {
      searchQuery: '',
      list: [/* 数据 */],
      fuse: null
    }
  },
  mounted() {
    this.fuse = new Fuse(this.list, {
      keys: ['name'],
      threshold: 0.4
    })
  },
  computed: {
    filteredList() {
      return this.searchQuery 
        ? this.fuse.search(this.searchQuery).map(r => r.item)
        : this.list
    }
  }
}

防抖优化性能

频繁触发搜索会导致性能问题，可以通过防抖（debounce）控制触发频率。

import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      filteredList: []
    }
  },
  watch: {
    searchQuery: _.debounce(function(newVal) {
      this.filteredList = this.list.filter(item =>
        item.name.toLowerCase().includes(newVal.toLowerCase())
      )
    }, 300)
  }
}

高亮匹配结果

使用自定义指令或过滤器实现搜索关键词高亮显示，提升用户体验。

<template>
  <span v-html="highlight(item.name, searchQuery)"></span>
</template>

<script>
export default {
  methods: {
    highlight(text, query) {
      if (!query) return text
      const regex = new RegExp(query, 'gi')
      return text.replace(regex, match => `<span class="highlight">${match}</span>`)
    }
  }
}
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

多字段联合搜索

当需要同时搜索多个字段时，扩展过滤逻辑即可。

computed: {
  filteredList() {
    return this.list.filter(item => 
      ['name', 'description', 'category'].some(key =>
        String(item[key]).toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    )
  }
}