这就是个模糊查询,我们平常做的都是直接输入汉字去把对应的值过滤出来,但我还真是第一次通过拼音去查询(当然不只是拼音,汉字也是可以的),以前还真没注意这个。唉,这可咋搞,我怎么知道某个汉字(字符串)的拼音的首字母是什么呢?正当我愁眉苦脸的时候,哎,一个库被我发现了,hhhhh~。就是pinyin-match。下面介绍该包的使用,这个包也不大,四百多kb。蛮高效的。下面介绍一下该库的使用
npm官方:https://www.npmjs.com/package/pinyin-match
1. 首先说下功能:
它能够使用拼音快速检索目标。当然也可以使用汉字
- 简体版27KB (gzip ≈ 19KB),繁体版86KB (gzip ≈ 60KB)
- 支持多音字、繁体字、拼音首字母匹配,具备分词功能
- 返回位置信息,可用于高亮匹配字符
- 在长多音字串下依然有高性能
在线演示:http://laosep.top/pinyin-match/
2. 安装:
npm install pinyin-match --save
3. 引入:
简体版:
import PinyinMatch from 'pinyin-match'; // es
const PinyinMatch = require('pinyin-match'); // commonjs
繁体版:
import PinyinMatch from 'pinyin-match/es/traditional.js'; // es
const PinyinMatch = require('pinyin-match/lib/traditional.js'); // commonjs
当然也可以script引入
// 简体:
// 繁体:
4. API:
.match(input, keyword) //查询匹配拼音的数据。
只向外提供暴露了这么一个方法,这一个方法足够我们使用了,也很方便
参数:
- input
{string}
目标字符串 - keyword
{string}
输入的拼音或其他关键词
返回:
Array | Boolen
5. 简单使用测试示例:
let test = '123曾经沧海难为水除却巫山不是云'
PinyinMatch.match(test, '23曾'); // [1, 3]
PinyinMatch.match(test, 'cjc') // [3, 5]
PinyinMatch.match(test, 'cengjingcanghai') // [3, 6]
PinyinMatch.match(test, 'cengjingcangha') // [3, 6]
PinyinMatch.match(test, 'engjingcanghai') // false
PinyinMatch.match(test, 'zengjingcang') // [3, 5]
PinyinMatch.match(test, 'sdjkelwqf') // false
PinyinMatch.match(test, 'zengji ng cang') // [3, 5]
PinyinMatch.match(test, 'zengji ng cangsdjfkl') // false
PinyinMatch.match(' 我 爱你 中 国 ', 'nzg') // [6, 12]
PinyinMatch.match(' 我 爱你 中 国 ', '爱你中') // [5, 8]
PinyinMatch.match('發', 'fa') // [0, 0]
6. 具体案例:
就是平常的列表展示加模糊搜索。所用的人员列表测试数据都是下面这种格式,章末会把完整测试数据附上。
// 模拟后端返回的数据
export default [
{
name: '管理员',
no: 'FT00000'
},
//...
]
其实很简单的了,主要是实现拼音的搜索过滤的功能,所以我案例里面样式也没调,主要是功能
闲话不说了,直接上完整代码,大家看下里面的逻辑都明白了,就这么一个组件:
{{ index }}# : {{ user.name }}
接下来看下效果:
接下来!我们可以把上面的示例再提高点儿难度,因为让我想起了通讯录,所以在展示的时候我们就像通讯录那样展示
首先将拿到的人员列表进行分组,根据什么分呢?就是根据字母,a、b、c…这样,难道我们要把26个英文字母全都列出来吗?当然这个也分需求,但如果是通讯录的话,我们只需要百家姓中所有的拼音的首字母就可以了,也就是:abcdefghjklmnopqrstwxyz 这些。
在上面示例的基础上进行修改,在拿到人员数据之后,先处理一下,然后再进行过滤模糊查询
完整代码:
{{ user.key }}
{{ o.name }}
最后看下修改后的效果:
接下来是上面测试用的数据
export default [
{
"name": "管理员",
"no": "FT00000"
},
{
"name": "朱大锤",
"no": "FT00001"
},
{
"name": "郝大锤",
"no": "FT00002"
},
{
"name": "宋大锤",
"no": "FT00003"
},
{
"name": "杨大锤",
"no": "FT00004"
},
{
"name": "石大锤",
"no": "FT00005"
},
{
"name": "郑大锤",
"no": "FT00006"
},
{
"name": "刘大锤",
"no": "FT00007"
},
{
"name": "赵大锤",
"no": "FT00008"
},
{
"name": "李大锤",
"no": "FT00009"
},
{
"name": "牛二",
"no": "FT00010"
},
{
"name": "张大锤",
"no": "FT00011"
},
{
"name": "王大锤",
"no": "FT00012"
},
{
"name": "冯大锤",
"no": "FT00013"
},
{
"name": "李大锤",
"no": "FT00014"
},
{
"name": "邓大锤",
"no": "FT00015"
},
{
"name": "孙大锤",
"no": "FT00016"
},
{
"name": "袁大锤",
"no": "FT00017"
},
{
"name": "康大锤",
"no": "FT00018"
},
{
"name": "武大锤",
"no": "FT00019"
},
{
"name": "蔡大锤",
"no": "FT00020"
},
{
"name": "戴大锤",
"no": "FT00021"
},
{
"name": "鄂大锤",
"no": "FT00022"
},
{
"name": "封大锤",
"no": "FT00023"
},
{
"name": "盖大锤",
"no": "FT00024"
},
{
"name": "景大锤",
"no": "FT00025"
},
{
"name": "麻大锤",
"no": "FT00026"
},
{
"name": "那大锤",
"no": "FT00027"
}
]
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.e1idc.net