Skip to main content
Created for OutSystems 10. Not working on your version? Tell us about it!

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

オートコンプリートによる検索フィールドの作成

スキャフォールディングやSILKUIのSelect2を使用せずに単語予測機能付きの入力フィールドを実装するにはどのようにすればよいですか?

例: ユーザーを選択する検索フィールドがあり、入力中に動的にデータベースへのクエリを実行し、候補リストを表示する必要がありします。 ユーザーのリストが長いため、Select2は使用しません。Select2では、クライアント側でフィルタリングが可能な状態になる前にすべてのユーザーをCombo BoxまたはList Boxに反映する必要があるためです。

回答

オートコンプリートによる検索フィールドを作成するには、以下の手順を実行します。

  1. 検索フィールドのInputウィジェットのNameプロパティとVariableプロパティを、ローカル変数(この場合は「UserSearch」と「Name_Search」)に設定します。

  2. Inputウィジェットの横にInput_AutoComplete RichWidgetを追加し、InputWidgetIdプロパティをInputウィジェットのIDに設定します。

  3. Input_AutoCompleteのOn Notify>Destinationプロパティを、新しく作成した画面アクション(この場合は「UsersAutoComplete」)に設定します。

  4. 画面アクションにAggregateを追加し、ローカル変数を使用するフィルタを作成し、Inputウィジェットの入力内容に基づいてクエリ結果を制限します。

    この場合、フィルタUsers.Name like "%"+Name_Search+"%"は、Inputウィジェットの入力内容がNameアトリビュートに含まれるユーザーのみを取得します。

  5. Aggregateの後にInput_AutoComplete_ShowList画面アクションを追加します。

    Action>InputWidgetIdプロパティをInputウィジェットのIDに設定し、Action>ListをAggregateのリスト(この場合は「GetUsersforAutoComplete.List」)に設定します。

    LabelプロパティとIdentifierプロパティがマッピングされていることを確認します。Labelにはオートコンプリートリストに表示される値が保持され、Identifierにはそれらの値の識別子が保持されます。

    画面アクションは以下の画像のようになります。

    このアクションは、入力フィールドの下に表示されるオートコンプリートの候補をデータベースに対してクエリを実行します。

これらの手順の後、検索フィールドに候補リストが表示され、リストが入力に応じて変化します。

選択したユーザーの識別子にアクセスするには、Input_AutoComplete_GetIdentifierサーバーアクションを使用します。