2016年4月25日月曜日

ionic2 searchbarでエンター押下時に検索

<ion-searchbar [(ngModel)]="searchQuery" (input)="searchItem($event)"></ion-searchbar>

上記の場合はキーを押下時にsearchItemが呼ばれます。既にあるリストをフィルタする場合などは良いのですが、サーバーに呼び出しを行いたい場合は頻繁に負荷をかけることになるのでエンターを押した場合のみ呼び出したい場合もあると思います。

inputではなくsearchイベントを使うことで解決できます。(ドキュメントには未記載)

<ion-searchbar [(ngModel)]="searchQuery" (search)="searchProduct($event)" ></ion-searchbar>

input,searchイベント共に呼ばれる関数内で モデルとしてバインドされているsearchQueryを使用してはいけないようです。関数が呼ばれた時点ではまだ値の同期が終わっていない場合がありました。
したがって以下のように関数に渡しているeventから値を取得する必要があります。

inputの場合
searchItem = function(event){
//eventがsearchbarなので
 var query = event["value"];
} 

searchの場合
searchItem = function(event){
//eventはEventオブジェクトなので
 var query = event["target"]["value"];
}

0 件のコメント:

コメントを投稿