Jak wykonać autouzupełnianie w trybie jonowym 2 (pasek wyszukiwania)

Question

Próbuję zrobić automatyczne uzupełnianie w pasku wyszukiwania, co zrobiłem do tej pory.

Mam tablicę z niektórymi ciągami. a następnie próbuję wyświetlić w moich pozycjach, że mogę przeszukać element particualr.

Ale moim wymaganiem nie jest wyświetlanie pozycji na liście. Muszę zrobić, klikając na pasku wyszukiwania wszystkie ciągi w tablicy powinny pochodzić i muszę wykonać wyszukiwanie.

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

Kod dla pliku 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); 
     }) 
    } 
    } 
} 

Pytanie:

Jak uzyskać wartość tablicy przez auto kompletne jonowego 2.

Answer 1

Aby to osiągnąć, wystarczy dodaj małą rzecz do swojego kodu. Proszę spojrzeć na this plunker.

Jak widać, przy zmiennej showList możemy wyświetlać wyniki tylko wtedy, gdy użytkownik czegoś przeszuka.

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

Najpierw ustawić tę zmienną na false w constructor a następnie ustawić go do true wewnątrz metody getItems(...).