版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/csxypr/article/details/84451878
看到小咸儿完成这个任务,心情十分亢奋啊!但是是基于先把拼音与中文转换的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 items
this.initializeItems();
// set val to the value of the ev target
const val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
// 如果有数据,则不显示没有数据span
if (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;
}
}
这样小咸儿的根据拼音字母查询人员就完成了,(▽)。接下来就是去看看还有什么地方需要优化了。