本文共 2244 字，大约阅读时间需要 7 分钟。

  看到小咸儿完成这个任务，心情十分亢奋啊！但是是基于先把拼音与中文转换的node包下载下来。

  首先先说一下小咸儿这个问题的思路：

• 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

  重点来了，既然汉字名字和拼音名字都有了，那么就需要去匹配查询了。

// 搜索  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;    }  }

  这样小咸儿的根据拼音字母查询人员就完成了，(^▽)。接下来就是去看看还有什么地方需要优化了。

转载地址：http://wcerb.baihongyu.com/