input
组件不支持自动完成。
我正在使用离子2。
我有一个数组值。
我需要输入具有自动完成功能的文本。
示例
HTML中
<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>
在组件中
selectGotram() {
let data = { "title": "Gotram", "form": "show_autocomplete", "data": gotrams }
let modal = this.modalCtrl.create(HelperComponent, data);
modal.onDidDismiss(data => {
if (data) {
this.user.gotram = data;
}
});
modal.present();
}
在辅助组件模式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>
在辅助组件模式中]
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); }
input
组件不支持自动完成。
但是您可以使用:
select
组件。检查此link。Searchbar
组件。检查此link也请检查此ionic2-autocomplete
您可以尝试一个支持Ionic 2+和Angular 2+的外部库,例如ionic4-auto-complete。
input
组件不支持自动完成。
您可以尝试一个支持Ionic 2+和Angular 2+的外部库,例如ionic4-auto-complete。