Autocomplete 离子2输入文本自动完成
我用的是离子2 我有一个数组值Autocomplete 离子2输入文本自动完成,autocomplete,ionic2,Autocomplete,Ionic2,我用的是离子2 我有一个数组值 我需要使用自动完成功能输入文本。输入组件不支持自动完成功能 但您可以使用: 选择组件。看看这个 搜索栏组件。检查这个 也检查一下这个 首先创建一个模态 继续在那个模式中搜索 在该模式中选择列表后 关闭模式并将值绑定到输入 范例 在html中 <ion-item inset> <ion-label floating i18n>Gotram*</ion-label> <i
我需要使用自动完成功能输入文本。输入组件不支持自动完成功能 但您可以使用:
选择组件。看看这个
搜索栏
组件。检查这个<ion-item inset>
<ion-label floating i18n>Gotram*</ion-label>
<ion-input type="text" (focus)="selectGotram()" readonly [(ngModel)]="user.gotram" name="gotram" #gotram="ngModel" required></ion-input>
</ion-item>
在帮助器组件模式html中
<ion-searchbar showCancelButton="true" (ionInput)="getItems($event)" (ionCancel)="clearItems($event)"></ion-searchbar>
<ion-list radio-group [(ngModel)]="selected_item">
<ion-item *ngFor="let item of data" (click)="selectedItem(item)">
<ion-label>{{item}}</ion-label>
<ion-radio [value]="item"></ion-radio>
</ion-item>
<ion-item *ngIf="data?.length ==0">
<h2>no matched items</h2>
</ion-item>
</ion-list>
您可以尝试使用支持离子2+和角度2+的外部库
<ion-searchbar showCancelButton="true" (ionInput)="getItems($event)" (ionCancel)="clearItems($event)"></ion-searchbar>
<ion-list radio-group [(ngModel)]="selected_item">
<ion-item *ngFor="let item of data" (click)="selectedItem(item)">
<ion-label>{{item}}</ion-label>
<ion-radio [value]="item"></ion-radio>
</ion-item>
<ion-item *ngIf="data?.length ==0">
<h2>no matched items</h2>
</ion-item>
</ion-list>
this.data = this.params.get('data');
this.auto_complete = this.data;
getItems(ev) {
// set val to the value of the ev target
var val = ev.target.value;
console.log(val);
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.data = this.auto_complete.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
console.log(this.data);
}
clearItems(ev) {
// set val to the value of the ev target
var val = ev.target.value;
console.log(val);
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.data = this.auto_complete.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
selectedItem(item) {
this.viewCtrl.dismiss(item);
}