テキストボックスの逐次検索（インクリメンタルサーチ）
インクリメンタルサーチ（せっかち検索）を利用することで、テキストボックス内の入力内容から逐次検索を行って選択肢を絞りこむ方法をご紹介します。
テキストボックスの課題
検索画面の作成にあたりテキストボックスを採用すると、利用者に自由入力をしてもらうことが可能となる一方、
入力値がレコードと一致しないと検索にヒットしないことから、正確な値の入力が必要になります。
本項では、サンプルファイルを使ったレポートの検索画面を例に、テキストボックスの入力値に応じて候補値の逐次検索を行う機能の実装を行います。
レポートの作成とフィルタ設定
App Studioより、CARファイル（または任意のデータ）のレポート作成画面を開き、下記を参考にレポートを作成します。
- BY項目に「CAR」、「MODEL」、SUM項目に「SALES」を配置する。任意のファイルの場合はBY項目とSUM項目を配置する
- フィルタ作成画面（WHERE）にて、CAR、または任意のカラムに「パラメータ – 動的」のフィルタを作成する
フィルタの設定まで行えたら、レポートを保存してください。
テキストボックスの作成と設定
HTMLキャンバスで作成した検索画面のテキストボックスに対して、インクリメンタルサーチの実装を行います。
1.HTMLキャンバスにて先ほど作成したレポートを取り込み、CARフィルタのテキストボックスタイプのコントロールを配置する
2. テキストボックスを選択した状態で設定を開き、データタイプを「動的」、値フィールドと表示フィールドにそれぞれ「CAR.COMP.CAR」を設定する
3. テキストボックスを選択した状態でプロパティを開き、「デフォルトの選択」を「いいえ」に設定する
コントロールの設定ができたら、作成した検索画面を実行し、動作の確認を行います。
「a」と入力するとテキストボックスの下に「a」を含むレコードの候補が出力されます。
候補をマウスクリックで選択ができます。
選択した候補で実行を行うと、フィルタに応じたレポートが表示されます。
関連記事
テキストボックスの設定に関する記事を合わせてご紹介します。
