Ionic 2 输入文本自动完成答案

【问题标题】：Ionic 2 input text autocompleteIonic 2 输入文本自动完成
【发布时间】：2017-08-25 09:58:36
【问题描述】：

我正在使用离子 2。

我有一个数组值。

我需要带有自动完成功能的输入文本。

【问题讨论】：

标签： autocomplete ionic2

【解决方案1】：

input 组件不支持自动完成功能。

但你可以使用：

select 组件。检查这个link。
Searchbar 组件。检查这个link

也可以查看ionic2-autocomplete

【讨论】：

【解决方案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);
  }

【讨论】：

【解决方案3】：

您可以尝试使用支持 Ionic 2+ 和 Angular 2+ 的外部库，例如 ionic4-auto-complete。

【讨论】：