web-dev-qa-db-ja.com

ionic 2（検索バー）でオートコンプリートを行う方法

私はこれまでにやったことは私の検索バーでオートコンプリートをしようとしています。

いくつかの文字列を持つ配列があります。そして、私は自分のアイテムにリストしようとしていますが、特定のアイテムを検索できます。

しかし、私の要件は、リストにアイテムを表示することではありません。検索バーをクリックすると、配列内のすべての文字列が表示され、検索を実行する必要があります。

<ion-header>

  <ion-navbar>
    <ion-title>search</ion-title>
  </ion-navbar>
  <ion-toolbar primary >
    <ion-searchbar (ionInput)="getItems($event)" autocorrect="off"></ion-searchbar>
  </ion-toolbar>

</ion-header>


<ion-content padding>

<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item }}
  </ion-item>
</ion-list>  

</ion-content>

Search.tsファイルのコード：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

/*
  Generated class for the SearchPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'build/pages/search/search.html',
})
export class SearchPage {
private searchQuery: string = '';
  private items: string[];

  constructor(private navCtrl: NavController) {
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      'Amsterdam',
      'Bogota',
    ]
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let 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) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

質問：

ionic 2.でオートコンプリートを介して配列の値を取得する方法.

angulartypescriptionic-frameworkionic2ionic3
10
balaji

それを実現するには、コードに小さなものを追加するだけです。 this plunker をご覧ください。

ご覧のように、showList変数を使用すると、ユーザーが何かを検索した後にのみ結果を表示できます。

_  <ion-list *ngIf="showList">
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
_

最初にその変数をfalseでconstructorに設定し、次にgetItems(...)メソッド内でtrueに設定します。

15
sebaferreras