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())
)
)
}
}
