当前位置：首页 > VUE

vue实现拼音模糊搜索

2026-02-23 17:09:07VUE

实现思路

拼音模糊搜索的核心是将中文转换为拼音，并在搜索时匹配拼音或拼音首字母。需要借助第三方库将中文转换为拼音，并处理用户输入的搜索词。

安装拼音转换库

推荐使用 pinyin-pro 或 pinyin 库。以 pinyin-pro 为例：

npm install pinyin-pro

核心代码实现

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

<script>
import { pinyin } from 'pinyin-pro';

export default {
  data() {
    return {
      searchText: '',
      originalList: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    };
  },
  computed: {
    filteredList() {
      if (!this.searchText.trim()) return this.originalList;

      const searchKey = this.searchText.toLowerCase();
      return this.originalList.filter(item => {
        // 获取完整拼音
        const fullPinyin = pinyin(item.name, { toneType: 'none' }).replace(/\s+/g, '');
        // 获取首字母
        const initials = pinyin(item.name, { pattern: 'first', toneType: 'none' }).replace(/\s+/g, '');

        return (
          item.name.includes(searchKey) || // 中文匹配
          fullPinyin.includes(searchKey) || // 全拼音匹配
          initials.includes(searchKey) // 首字母匹配
        );
      });
    }
  }
};
</script>

优化方案

对于大数据量的场景，可以预先计算拼音并缓存：

created() {
  this.enhancedList = this.originalList.map(item => ({
    ...item,
    fullPinyin: pinyin(item.name, { toneType: 'none' }).replace(/\s+/g, ''),
    initials: pinyin(item.name, { pattern: 'first', toneType: 'none' }).replace(/\s+/g, '')
  }));
},
computed: {
  filteredList() {
    return this.enhancedList.filter(item => 
      item.name.includes(this.searchText) ||
      item.fullPinyin.includes(this.searchText.toLowerCase()) ||
      item.initials.includes(this.searchText.toLowerCase())
    );
  }
}

高级功能扩展

实现拼音分词搜索（如"ping guo"匹配"苹果"）：

// 在过滤逻辑中添加分词匹配
const searchKeys = this.searchText.toLowerCase().split(/\s+/);
return fullPinyin.includes(searchKeys.join('')) || 
       searchKeys.every(key => fullPinyin.includes(key));