Ion-SearchBar не работает должным образом - PullRequest
Новая
       10

Ion-SearchBar не работает должным образом

0 голосов
/ 27 июня 2018

У меня есть массив, который я использую для заполнения, и я использую ионную панель поиска, чтобы пользователь мог искать элемент в списке, но проблема в том, когда пользователь удаляет или удаляет то, что он искал в списке не возвращается в исходное состояние

Код ниже: 

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

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Попробуйте этот код: 

//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>
0 голосов
/ 27 июня 2018

Существует еще одно свойство вывода, которое называется ionClear , которое срабатывает при нажатии кнопки возврата назад.

вы можете использовать его так: 

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