Comment faire auto-complete en ionique 2 (Recherche-barre)

j'essaie de faire une auto complète dans ma barre de recherche ce que j'ai fait jusqu'à présent est.

j'ai un tableau avec des chaînes. et puis j'essaie d'énumérer dans Mes items que je suis capable de rechercher l'item en particulier.

mais mon exigence n'est pas d'afficher les articles dans une liste. Je dois faire en cliquant sur la barre de recherche toutes les chaînes dans le tableau devrait venir, et la je dois faire une recherche.

<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>

Code pour la recherche.ts fichier:

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);
      })
    }
  }
}

Question:

Comment obtenir la valeur d'un tableau à travers auto complete dans ionic 2.

9
demandé sur sebaferreras 2016-08-23 08:32:54

1 réponses

pour y parvenir, vous avez juste besoin d'ajouter un petit quelque chose à votre code. Veuillez prendre un coup d'oeil à ce plongeur.

Comme vous pouvez le voir, avec l' showList variables, nous pouvons montrer les résultats qu'après que l'utilisateur a cherché quelque chose.

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

nous avons d'abord placé cette variable à false dans le constructor et puis, nous avons créé à true à l'intérieur du getItems(...) méthode.

12
répondu sebaferreras 2017-05-05 09:20:05