看到小鹹兒完成這個任務，心情十分亢奮啊！但是是基於先把拼音與中文轉換的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;
    }
  }

 

  這樣小鹹兒的根據拼音字母查詢人員就完成了，(^▽)。接下來就是去看看還有什麼地方需要優化了。