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