如何做在離子2自動完成（搜索欄）

我想做一個自動完成在我的搜索欄我到目前爲止做了什麼。我有一個字符串數組。然後我試圖在我的項目中列出它我能夠搜索particualr項目。如何做在離子2自動完成（搜索欄）

但我的要求是不顯示列表中的項目。我必須點擊搜索欄，所有的數組中的字符串應該來，我必須進行搜索。

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

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

問：

如何通過自動完成離子2.

得到一個數組的值

來源

2016-08-23 balaji

您能否添加您的視圖的代碼？ – sebaferreras

我已經添加了我的代碼HTML和.ts文件請看看它。我是新來的這 – balaji

我看到在離子文檔，他們有自動完成屬性的搜索欄，你有沒有試過這個？ http://ionicframework.com/docs/v2/api/components/searchbar/Searchbar/ – galvan

爲了達到這個目的，你只需要爲你的代碼添加一個小東西。請看看this plunker。

就像你可以看到那裏，與showList變量，我們可以顯示結果只有當用戶搜索的東西。

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

我們首先該變量設置爲false在constructor，然後我們將其設置爲true的getItems(...)方法內。

來源

2016-08-23 07:37:59 sebaferreras

我做了同樣的事情，但我在this.items數組中遇到了錯誤 – balaji

但是重新啓動工作正常。你能否仔細看一下，看看這個笨蛋和你的代碼有什麼區別？ – sebaferreras

我明白了，謝謝 – balaji

如何做在離子2自動完成（搜索欄）

回答

相關問題