İyonik 2'de otomatik tamamlama nasıl yapılır (arama-çubuğu)

Question

Arama çubuğumda şu ana kadar yaptığım bir otomatik tamamlama yapmaya çalışıyorum.

Bazı dizeleri olan bir dizim var. ve sonra öğelerimde listelemeye çalışıyorum, partikül öğesini arayabiliyorum.

Ancak gereksinim, listedeki öğeleri görüntülemektir. Arama çubuğuna tıklamak zorundayım, dizideki tüm dizeler gelmeli ve bir arama yapmalıyım. search.ts dosyası için

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

Kodu:

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

Soru:

Nasıl iyonik 2.

tam otomatik aracılığıyla bir dizinin değeri elde etmek

Answer 1

Bunu başarmak için, sadece kodunuza küçük bir şey ekleyin. Lütfen this plunker'a bir göz atın.

Orada gördüğünüz gibi, showList değişkeniyle sonuçları yalnızca kullanıcı bir şey aradıktan sonra gösterebiliriz.

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

Biz ilk constructor yılında false için o değişkeni ayarlamak ve sonra biz getItems(...) yöntemi içinde true olarak ayarlayın.