当前位置：首页 > VUE

vue实现模糊查询功能

2026-01-20 14:14:44VUE

Vue 实现模糊查询功能

数据准备

确保有一个数组作为数据源，例如：

data() {
  return {
    items: ['Apple', 'Banana', 'Orange', 'Grape'],
    searchQuery: '',
    filteredItems: []
  }
}

计算属性实现

使用计算属性根据输入的关键词实时过滤数据：

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

模板部分

在模板中添加输入框和结果列表：

<input v-model="searchQuery" placeholder="Search...">
<ul>
  <li v-for="item in filteredItems" :key="item">
    {{ item }}
  </li>
</ul>

优化性能

对于大数据量，可以添加防抖：

methods: {
  debounceSearch: _.debounce(function() {
    this.filteredItems = this.items.filter(item =>
      item.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }, 300)
}

使用第三方库

考虑使用 Fuse.js 实现更强大的模糊搜索：

import Fuse from 'fuse.js'

methods: {
  initFuse() {
    this.fuse = new Fuse(this.items, {
      keys: ['name'],
      threshold: 0.4
    })
  },
  search() {
    this.filteredItems = this.searchQuery 
      ? this.fuse.search(this.searchQuery).map(r => r.item)
      : this.items
  }
}

样式增强

为搜索结果添加高亮效果：

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

完整示例

<template>
  <div>
    <input v-model="searchQuery" @input="debounceSearch">
    <ul>
      <li v-for="item in filteredItems" :key="item" v-html="highlight(item)">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange', 'Grape'],
      searchQuery: '',
      filteredItems: []
    }
  },
  methods: {
    debounceSearch: _.debounce(function() {
      this.filteredItems = this.items.filter(item =>
        item.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }, 300),
    highlight(text) {
      if (!this.searchQuery) return text
      const regex = new RegExp(this.searchQuery, 'gi')
      return text.replace(regex, match => `<span class="highlight">${match}</span>`)
    }
  }
}
</script>

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

vue实现模糊查询功能