ionic -- 实现根据拼音字母搜索人员

  看到小咸儿完成这个任务，心情十分亢奋啊！但是是基于先把拼音与中文转换的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;
    }
  }

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