Comment faire de l'auto-complétion dans ionique 2 (recherche-bar)

Je suis en train de faire une auto complète dans ma barre de recherche de ce que j'ai fait jusqu'à présent.

J'ai un tableau avec des chaînes. et puis je suis en train de liste dans mes articles je suis en mesure de rechercher l'élément particulier.

Mais mon exigence est de ne pas afficher les éléments 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 grâce à la saisie semi-automatique dans ionique 2.

Pourriez-vous s'il vous plaît ajouter le code de votre point de vue?
J'ai ajouter mon code HTML et .ts fichier, veuillez jeter un oeil à elle. Je suis nouveau sur ce
Je vois Ionique dans les docs qu'ils ont saisie semi-automatique de la propriété pour la barre de recherche, avez-vous essayé? ionicframework.com/docs/v2/api/components/searchbar/Searchbar
je n'ai pas d'idée pouvez vous m'aider comment faire pour utiliser la saisie semi-automatique de la propriété
Qu'entendez-vous par " 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?

OriginalL'auteur balaji | 2016-08-23

14

Afin de parvenir à cela, vous avez juste besoin d'ajouter un petit quelque chose à votre code. Veuillez prendre un coup d'oeil à cette plunker.

Comme vous pouvez le voir là, avec le showList variable, 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 définir cette variable à false dans le constructor et puis nous nous sommes mis à true à l'intérieur de la getItems(...) méthode.

j'ai fait la même chose mais j'ai obtenu un message d'erreur à ce.les éléments de la matrice de
pour éviter de montrer le bouton "annuler" au début, ajouter [showCancelButton]="false". Et j'ai créé cette nouvelle plunker où je me cache dans les résultats lorsque le contenu de la barre de recherche est vide. Espérons que cela aide 🙂
plunker lien est rompu..pouvez-vous mettre à jour, s'il vous plaît?
le plunker de la réponse a été mis à jour. S'il vous plaît laissez-moi savoir si c'est ce que vous cherchez.
merci 🙂 son travail et m'a aidé dans mon appli 🙂 @sebaferreras

OriginalL'auteur sebaferreras

Vous devez vous connecter pour publier un commentaire.