当前位置：首页 > VUE

vue实现模糊搜索

2026-01-19 09:53:00VUE

实现模糊搜索的基本思路

在Vue中实现模糊搜索通常需要结合输入框和列表展示，通过监听输入框的变化实时过滤数据。核心逻辑是对比用户输入的关键词与目标数据的匹配程度，可采用字符串的includes、indexOf方法或正则表达式。

使用计算属性实现

数据准备
假设有一个数据列表items和一个搜索关键词searchQuery：

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

计算属性过滤
通过计算属性动态返回匹配的结果：

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

结合输入框和列表展示

模板部分
绑定输入框和展示过滤后的列表：

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

使用第三方库增强模糊搜索

如果需要更复杂的模糊匹配（如权重、拼音搜索等），可以引入第三方库如fuse.js：

安装Fuse.js
```
npm install fuse.js
```

配置与使用

import Fuse from 'fuse.js'

computed: {
  filteredItems() {
    const fuse = new Fuse(this.items, { keys: ['name'] })
    return this.searchQuery 
      ? fuse.search(this.searchQuery).map(result => result.item)
      : this.items
  }
}

处理异步数据

如果数据通过API异步加载，需在获取数据后触发过滤：

async created() {
  this.items = await fetchItems() // 假设是API请求
},
computed: {
  filteredItems() {
    // 确保数据已加载
    return this.items?.filter(item => 
      item.name.includes(this.searchQuery)
    ) || []
  }
}