js手机通讯录

ionic页面··············································································

 
   
      联系人
   
 




class="searchbar"
placeholder="搜索..."
[(ngModel)]="myInput"
(ionInput)="getItems($event)"
(ionCancel)="onCancel($event)"
(ionFocus)="onFocus($event)"
[animated]='animate'
[cancelButtonText]='textValue'
[showCancelButton]="shouldShowCancel">

 

{{item.key}}

//显示27个字母
 
 
 
   
     
   
   
   

   

{{i.displayName}}

   
   

   
    {{i.orgName}} / {{i.postion}}
   
   
 
 

//当激活输入框时 开始搜索通讯录页面

 
 
   
     
   
   
   

   

{{i.displayName}}

   
   

   
    {{i.orgName}} / {{i.postion}}
   
   
 
 

typescript页面·····························································································

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TellInfor } from './tellInfor/tellInfor';
import * as _ from 'lodash';
import { apiService } from "../../api.service";//请求通讯录数据
import { translateService} from '../../../translate.service';
import { Storage } from '@ionic/storage';//注入本地存储


@Component({
 selector: 'tell-list',
templateUrl: 'tellList.html',
providers:[translateService],

})


export class TellList {
public showDetail = true;
searchQuery: string = '';
public showInfo=true;

public keys='ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split('');
public userlist = [];
public users = [];
  public items = [];
  public itemss=[];
  public reg=/^[a-zA-Z]+$/; 
myInput ='';
textValue='取消';
shouldShowCancel=false;
condition=true;
condition1=false;
animate=true;
 
  constructor( public navCtrl: NavController, public storage: Storage,public traSev: translateService) { 
 
this.initializeItems();

}
  
initializeItems() {
this.userlist = [];
this.users=[];
let userInfo;
//为每个对象添加一个属性
setTimeout(() => {
this.storage.get("userInfo").then((val) => {
userInfo= JSON.parse(val);
for(let i=0;iuserInfo.friends[i].picImg='assets/img/pic.png'
userInfo.friends[i].userPinyin=userInfo.friends[i].userPinyin.replace(/(^\s+)|(\s+$)/g,"")
if(userInfo.friends[i].userPinyin==''){
userInfo.friends[i].userPinyin=this.traSev.CC2PY(userInfo.friends[i].displayName)//没有获取到拼音的属性值并添加属性值
}
if(userInfo.friends[i].status==1){
userInfo.friends[i].status='在职'
}else{
userInfo.friends[i].status='离职'
}
}
//获取用户列表
this.users = _.cloneDeep(userInfo.friends);
this.items=_.cloneDeep(userInfo.friends);
this.itemss=_.cloneDeep(userInfo.friends);
//遍历所有数据放到对应的字母中
  for( let j=0; j    let obj={
    key:'',
    user:[]
    };
  obj.key=this.keys[j];
for(let i=0;i if(this.users[i].userPinyin.charAt(0).toUpperCase()==this.keys[j]){
  obj.user.push(this.users[i])
  }else if((!this.reg.test(this.users[i].userPinyin.charAt(0)))&&(this.keys[j]=='#')){//没有拼音的放到#中
obj.user.push(this.users[i])
}
}
this.userlist.push(obj);
    }
//遍历所有的,将空白的剔除掉
this.users=[];
    for(let i=0;i    if(this.userlist[i].user.length!=0){
    this.users.push(this.userlist[i])
    }
    }
});
},50)
  }

//激活焦点
onFocus(ev:any){
this.condition=false;
this.condition1=true;
this.shouldShowCancel=true;
this.items=[];
}
//点击取消按钮
onCancel(ev:any){
this.condition=true;
this.condition1=false;
}
  //过滤数据
    getItems(ev: any) {
   let val = ev.target.value;
   if (val && val.trim()!=' ') {
this.items=this.itemss.filter((i) => {
if((i.personManagerNameCn.indexOf(val)>-1)||(i.displayName.indexOf(val)>-1)||(i.userPinyin.toLowerCase().indexOf(val.toLowerCase()) > -1)||(i.phone.indexOf(val)>-1)){
return i;
}
   })
   }else{
    this.items=[];
   }
 }
//响应事件
detail(item){
this.navCtrl.push(TellInfor,{detailMsg:item});
}

}