オートコンプリートによる検索フィールドの作成
スキャフォールディングやSILKUIのSelect2を使用せずに単語予測機能付きの入力フィールドを実装するにはどのようにすればよいですか?
例: ユーザーを選択する検索フィールドがあり、入力中に動的にデータベースへのクエリを実行し、候補リストを表示する必要がありします。 ユーザーのリストが長いため、Select2は使用しません。Select2では、クライアント側でフィルタリングが可能な状態になる前にすべてのユーザーをCombo BoxまたはList Boxに反映する必要があるためです。
回答
オートコンプリートによる検索フィールドを作成するには、以下の手順を実行します。
-
検索フィールドのInputウィジェットの
Name
プロパティとVariable
プロパティを、ローカル変数(この場合は「UserSearch
」と「Name_Search
」)に設定します。 -
Inputウィジェットの横にInput_AutoComplete RichWidgetを追加し、
InputWidgetId
プロパティをInputウィジェットのIDに設定します。 -
Input_AutoCompleteの
On Notify
>Destination
プロパティを、新しく作成した画面アクション(この場合は「UsersAutoComplete」)に設定します。 -
画面アクションにAggregateを追加し、ローカル変数を使用するフィルタを作成し、Inputウィジェットの入力内容に基づいてクエリ結果を制限します。
この場合、フィルタ
Users.Name like "%"+Name_Search+"%"
は、Inputウィジェットの入力内容がName
アトリビュートに含まれるユーザーのみを取得します。 -
Aggregateの後にInput_AutoComplete_ShowList画面アクションを追加します。
Action
>InputWidgetId
プロパティをInputウィジェットのIDに設定し、Action
>List
をAggregateのリスト(この場合は「GetUsersforAutoComplete.List
」)に設定します。Label
プロパティとIdentifier
プロパティがマッピングされていることを確認します。Label
にはオートコンプリートリストに表示される値が保持され、Identifier
にはそれらの値の識別子が保持されます。画面アクションは以下の画像のようになります。
このアクションは、入力フィールドの下に表示されるオートコンプリートの候補をデータベースに対してクエリを実行します。
これらの手順の後、検索フィールドに候補リストが表示され、リストが入力に応じて変化します。
選択したユーザーの識別子にアクセスするには、Input_AutoComplete_GetIdentifierサーバーアクションを使用します。