web-dev-qa-db-fra.com

Comment effectuer la saisie semi-automatique dans ionic 2 (barre de recherche)

J'essaie de faire une saisie automatique dans ma barre de recherche ce que j'ai fait jusqu'à présent.

J'ai un tableau avec quelques chaînes. et puis j'essaye de lister dans mes articles, je suis capable de rechercher l'article particulier.

Mais mon exigence n'est pas d'afficher les éléments dans une liste. Je dois faire en cliquant sur la barre de recherche toutes les chaînes du tableau devraient venir et 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 du fichier 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);
      })
    }
  }
}

Question:

Comment obtenir la valeur d'un tableau via la saisie semi-automatique dans ionic 2.

angulartypescriptionic-frameworkionic2ionic3
10
balaji

Pour ce faire, il vous suffit d'ajouter une petite chose à votre code. Veuillez jeter un œil à ce plunker .

Comme vous pouvez le voir, avec la variable showList, nous ne pouvons afficher les résultats qu'après que l'utilisateur a recherché quelque chose.

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

Nous définissons d'abord cette variable sur false dans le constructor puis nous la définissons sur true dans la méthode getItems(...).

15
sebaferreras