目次
- はじめに
- 完成イメージ
- 実装方法
- 最後に
はじめに
textboxのプロパティには、入力した文字を元に入力候補を表示してくれるautoFilterという機能があります。
今回はそのautoFilterの実装方法について紹介していきたいと思います！
autoFilterは、モバイルのAndroidとWindowsのみ設定することができます。
iOSでは機能しないためご注意ください。
完成イメージ
今回の完成イメージはこちらです。
テキストボックスに社員名を入力すると、入力した文字に応じて候補が表示されるような簡単なアプリを作っていきます。
実装方法
まずは画面を作成していきましょう。
社員検索画面を作成したいので、このように画面を作成しました。
テキストボックスを配置したら、右側のPROPERTIES->Text Boxタブをクリックし、
Auto FilterをOnに設定してください。
次にControllerを開き候補を表示するロジックを記述していきます。
preShow: function(){
this.view.txtSearch.filterList =["田中","山田","大木","大島"];
}
filterList：
このメソッドを使うと、フィルターの候補として表示するフィルターリストを定義することができます。
今回は固定データとしていますが、APIから取得する場合も配列形式であれば同様に設定することが可能です。
関数の定義ができたので、あとはFormのアクションエディタでアクションを設定すれば完成です。
早速動作をみてみましょう！
文字を入力するとfilterListに設定されている文字が候補として出てきているのがわかるかと思います👀
フィルターリストの色についてですが、Windowsの場合のみ変更可能でAndroidでは変更ができません。。
Windowsのみ以下のプロパティも使用可能ですので、必要に応じて使ってみてください。
| プロパティ名 | 詳細 |
|---|---|
| filterCriteria | 前方一致、部分一致など検索方法を設定することができる |
| filterBoxSkin | フィルターリストの色を変更することができる |
最後に
autoFilterの機能について紹介しました！
モバイルのAndroidとWindowsのみで、実装できる端末は限られていますが、
簡単なアプリを実装する場合などロジックはほぼ不要で
すぐに実装することができるため、是非活用してみてくださいね
参考