离子搜索栏无法正常工作答案

【问题标题】：Ion-SearchBar not working properly离子搜索栏无法正常工作
【发布时间】：2018-06-27 12:06:58
【问题描述】：

我有一个用于填充的数组，我正在使用离子搜索栏，因此用户可以搜索列表中的项目，但问题是当用户退格或删除他们正在搜索的列表时不会回到原来的状态

代码如下：

<ion-searchbar  (ionInput)="setFilteredItems()" placeholder="Search"
                [(ngModel)]="searchTerm">
</ion-searchbar>

过滤功能：

filterItems(searchTerms){
    return this.categories.filter((item)=>{
      return item.category_name.toLowerCase().indexOf(searchTerms.toLowerCase())>-1;
    })

    setFilteredItems(){
        this.categories = this.filterItems(this.searchTerm);
    }
}

【问题讨论】：

标签： angular ionic-framework ionic2 ionic3 searchbar

【解决方案1】：

试试这个代码：

//Maintain a copy of data on which needs a search
this.searchListCopy = JSON.parse(JSON.stringify(this.categories));

protected search = () => {
    this.resetChanges();

    this.categories = this.categories.filter((item)=>{
        return item.category_name.toLowerCase().indexOf(searchTerms.toLowerCase())>-1;
    })
};

protected resetChanges = () => {
    this.categories = this.searchListCopy;
};

HTML 会是这样的：

<ion-searchbar class="searchIcon" [(ngModel)]="searchKey" [showCancelButton]="false" (ionInput)="search()" (ionClear)="resetChanges()">
</ion-searchbar>

【讨论】：

【解决方案2】：

当单击退格按钮时，会触发另一个名为 ionClear 的输出属性。

你可以这样使用它：

<ion-searchbar (ionClear)="setFilteredItems()" (ionInput)="setFilteredItems()" 
placeholder="Search" [(ngModel)]="searchTerm"></ion-searchbar>

【讨论】：