一、业务背景

因为门店系统里很多地方录单的时候需要选择员工，而当门店员工比较多的时候，想要快速的找到某个员工就比较困难。虽然目前加上了姓名搜索，但是同事反馈效率还是太慢了，于是就提出了按员工姓名进行拼音首字母搜索的功能。比如：张三，直接输入 zs 就可以检索出来。


二、功能实现

目前门店的员工数据是调后端接口直接全部返回的，没有分页。所以进行拼音搜索的话，直接在前端实现即可。具体的步骤如下：

1- 安装第三库

pnpm add pinyin-pro

如果你使用了 typescript，那么还需要安装对应的类型库 @types/pinyin-pro。因为类型库只在开发时使用，所以加上 -D ，将其安装在 devDependencies 里即可。

pnpm add -D @types/pinyin-pro


2- 具体使用案例

以下代码只贴出核心部分，没啥难度，注释已经写得比较详细了。

// 导入 pinyin 方法
import { pinyin } from 'pinyin-pro'

// 从后台接口拿到的员工数据
const staffs = [
    { user_id: 0, user_name: '张三' },
    { user_id: 1, user_name: '李四' },
    { user_id: 2, user_name: '王五' },
    { user_id: 3, user_name: '赵六' },
    { user_id: 4, user_name: '小七' },
    { user_id: 5, user_name: '老八' }
]

// 对员工数据时行处理，分别给它们加上拼音码
const staffsPinYin = staffs.map(x => {
    return {
        ...x,
        pinyin: pinyin(x.user_name, { pattern: 'first', toneType: 'none', separator:'' }).toLocaleUpperCase()
    }
})

// 处理完之后的数据将会是下面这样
// const staffsPinYin = [
//     { user_id: 0, user_name: '张三', pinyin: 'ZS' },
//     { user_id: 1, user_name: '李四', pinyin: 'LS' },
//     { user_id: 2, user_name: '王五', pinyin: 'WW' },
//     { user_id: 3, user_name: '赵六', pinyin: 'ZL' },
//     { user_id: 4, user_name: '小七', pinyin: 'XQ' },
//     { user_id: 5, user_name: '老八', pinyin: 'LB' }
// ]

// 搜索员工
const searchStaff = (keyword) => {
    if (keyword) {
        if (/^[a-zA-Z]$/.test(keyword)) { // 如果用户输入的 keyword 是纯字母，则筛选 pinyin
            return staffsPinYin.filter(x => x.pinyin.includes(keyword.toLocaleUpperCase()))
        } else { // 如果不是纯字母，则筛选 user_name
            return staffsPinYin.filter(x => x.user_name.includes(keyword))
        }
    } else {
        return staffsPinYin
    }
}


关于 pinyin(x.user_name, { pattern: 'first', toneType: 'none', separator: '' }) 方法的参数讲解。

1- pattern: 'first' 表示只获取首字母

2- toneType: 'none' 表示获取的拼音不带声调

3- separator: '' 表示获取的拼音之间分隔符为空


更多的用法和参数，可以访问 pinyin-pro 的官网进行了解，官网地址：https://pinyin-pro.cn/use/pinyin.html

本文最后更新于 2025-03-31 18:09:02JAVASCRIPT
天生我材必有用，千金散尽还复来～～
作者：鄢云峰 YYF声明：转载请注明文章出处地址：https://yanyunfeng.com/article/76
评论
提交
来发第一个评论啦～