ionic4 ion-searchbar 組件常用

 

下邊是ionic4 的搜索組件 比較常用的 

<ion-searchbar animated [(ngModel)]="bookName" (ionInput)="getItems($event)" (ionFocus)="focusInput()" (ionBlur)="blurInput()" 
 (ionClear)="cancel($event)"
    placeholder="請輸入搜索內容" showCancelButton="focus" cancelButtonText="搜索">
</ion-searchbar>

animated  是一個小動畫；

[(ngModel)]  跟3裏一樣傳值的；

(ionClear)  當點擊清除按鈕時觸發事件，同樣的還有：

ionInput 監聽input輸入框的變化；

ionFocus 當input框獲取焦點時觸發；

ionBlur 當input框失去焦點時觸發;

placeholder 這個就不用解釋了，看上邊代碼就很明確了；

showCancelButton 這個直譯也知道 是顯示取消按鈕，cancelButtonText 修改顯示取消按鈕默認文字 上邊代碼隨便舉例內容；

showCancelButton="focus" 中focus 還可以換成never，always；

 

我也簡單整理了個ion-searchbar 獲取焦點的方法 ：

https://blog.csdn.net/jasdolphin/article/details/100106004