看到小咸儿完成这个任务，心情十分亢奋啊！但是是基于先把拼音与中文转换的node包下载下来。ionic前端 - 汉字拼音
首先先说一下小咸儿这个问题的思路：
- 1.将所有人的姓名先查询出来
- 2.将汉字名字转换成拼音
- 3.获取输入框中值对中文名字或拼音名字进行匹配，查询出对应的人员
首先将所有人员查询出来是一个简单的功能：
代码：
getData() {this.companyId = localStorage.getItem('companyId');// let dataUrl = "http://192.168.22.52/auth-web/user/queryUsersByLike/666888?page=1&limit=550";let dataUrl = "http://192.168.22.55/auth-web/user/queryUserInfoByCompanyId/" + this.companyId;this.http.get(dataUrl).subscribe(res => {// 若查询不成功，则返回并清空缓存// if (res.status != 200) {// localStorage.removeItem(" ");// return;// }// this.user = res.json().data;if (res.json().code == '0000') {if (res.json().data.length > 0) {this.user = res.json().data;} else {return;}}})}
将所有人员查出来之后，需要的就是将所有的人员名字转成拼音了，在上一篇小咸儿的博客中有介绍如何在前端将汉字转为拼音，十分的简单！
其中还有一个小技巧，就是使用split去掉空格
initializeItems() {this.items = this.user;for(let i=0; i<this.items.length;i++){this.items[i].pinYinName = tr(this.items[i].userName).toLowerCase().split(" ").join("");}console.log(this.items);}
重点来了，既然汉字名字和拼音名字都有了，那么就需要去匹配查询了。
// 搜索getItems(ev) {var s = document.querySelector('.loadUser');s['style'].display = 'inline';var s = document.querySelector('.classBtnOk');s['style'].display = 'inline';//如果搜索框的值为undefined，则显示加载数据if (ev.target.value == undefined) {var s = document.querySelector('.classBtnOk');s['style'].display = 'none';}// Reset items back to all of the itemsthis.initializeItems();// set val to the value of the ev targetconst val = ev.target.value;// if the value is an empty string don't filter the itemsif (val && val.trim() != '') {this.items = this.items.filter((item) => {// 如果有数据，则不显示没有数据spanif (item.userName.toLowerCase().indexOf(val.toLowerCase()) > -1 || item.pinYinName.toLowerCase().indexOf(val.toLowerCase()) > -1) {var s = document.querySelector('.loadUser');s['style'].display = 'inline';}return (item.userName.toLowerCase().indexOf(val.toLowerCase()) > -1,item.pinYinName.toLowerCase().indexOf(val.toLowerCase()) > -1);//(item.toLowerCase().indexOf(val.toLowerCase()) > -1)})}else {this.items = null;}}
这样小咸儿的根据拼音字母查询人员就完成了，(▽)。接下来就是去看看还有什么地方需要优化了。
