Searchbar throws error during evaluation of "input" in version alpha47

Ionic Framework ionic-v3
1

Searchbar working fine in version ionic 2 alpha 42 throws console error as “error during evaluation of input” on entering data. (Checked with version alpha 46 and alpha 47). Below is my html code which was working fine.

<ion-searchbar [(ngModel)]="searchQuery"></ion-searchbar>
<ion-list #list class="searchList">
<ion-item *ngFor="#result of searchResult()">
<ion-thumbnail item-left> <img data-src="img/{{result.pic}}"> </ion-thumbnail>

My Ts:

searchResult(){
var query = this.searchQuery;
if(query.trim() == ‘’|| query.length <= 2){
return null;
}
return this.data.filter((myItem) => {
if(myItem.toLowerCase().indexOf(query.toLowerCase()) >= 0) {
return true;
}
return false;
})
}

Please help by letting me know what changes to be done to make it work fine in current version. Thanks in advance.

2

Hey, sorry I updated those docs last night but we haven’t pushed them to the site yet. They should be updated soon. Here is an updated version of the code.

Html:

<ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="#item of items">
    {{ item }}
  </ion-item>
</ion-list>

JS (you can do whatever you want on input change):

@Page({
  templateUrl: 'search/template.html',
})
class SearchPage{
  constructor() {
    this.searchQuery = '';
    this.items = [
      'Amsterdam',
      'Bogota',
      ...
    ];
  }

  getItems() {
    var q = this.searchQuery;
    if(q.trim() == '') { return this.items; }
    return this.items.filter((v) => {
      if(v.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
        return true;
      }
      return false;
    })
  }
}
3

Hi @brandyshea, thanks for you update. I implemented the changes mentioned by you in my code. I have my results along with the below exception in console.

Exception: Error during evaluation of “input”
ORIGINAL EXCEPTION: Reference error: event is not defined.

Do i have to import any package for this? Or please let me know where i am going wrong.

4

Are you passing $event in the function call?

5

yes @brandyshea. In version alpha 49, it works without any issue. :smile: