ionic -- 實現根據拼音字母搜尋人員
阿新 • • 發佈:2019-02-02
看到小鹹兒完成這個任務,心情十分亢奮啊!但是是基於先把拼音與中文轉換的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; } }
這樣小鹹兒的根據拼音字母查詢人員就完成了,(▽)。接下來就是去看看還有什麼地方需要優化了。