Tweet

.NET TIPS ［ASP.NET AJAX］ListSearchコントロールで検索可能なリストを作成するには？［2.0のみ、C#、VB］ 山田 祥寛 2007/06/14

. ListSearchコントロール（ListSearchExtender）は、ASP.NET AJAX Control Toolkit（以降、Control Toolkit）で提供されるコントロールの1つで、DropDownList／ListBoxコントロールに対して検索機能を追加するためのコントロールだ。

　これらのコントロール上で、エンド・ユーザーが先頭の数文字を入力することで、それにマッチする項目に自動的にフォーカスを移動できる。特にリストの項目数が多い場合、この検索機能を利用することで素早く目的の項目を選択できるというわけだ。

「jsr」と入力すると……

ListSearchコントロールによるリスト検索

先頭の数文字を入力することで、ListBoxコントロール内の該当する項目に自動的にフォーカスが移動する。

　それではさっそく、ListSearchコントロール利用の具体的な手順を見ていくことにしよう。なお、本サンプル・プログラムを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

1. 項目表示のためのデータソースを用意する

　まずは、ListBoxコントロール上に項目を表示するためのデータソースとして、以下のようなIndexListテーブルをデータベース上に作成しておこう。

フィールド名	データ型	概要
item	VARCHAR(100)	表示項目（主キー）
IndexListテーブルのフィールド・レイアウト

　IndexListテーブルは、リスト上に表示する項目のみを定義したごくシンプルなテーブルだ。リスト検索機能を実際に確認できるよう、入力候補となる適当な項目をあらかじめセットしておくこと。

2. 新規のWebフォームを作成する

　新規のWebフォーム（ListSearch.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。また、それぞれのコントロールに対しては、表の内容でプロパティ値を設定しておこう。

Webフォーム（ListSearch.aspx）のレイアウト

新規に作成したWebフォームに対して、ListSearchコントロールを配置する。

コントロール（ID） プロパティ 設定値 ScriptManager（manager） − − ListBox（list） DataSourceID sds DataTextField item DataValueField item SqlDataSource（sds） ConnectionString MyDB（接続名） SelectCommand SELECT [item] FROM [IndexList] ListSearchExtender（slist） PromptPosition Bottom PromptText Type text TargetControlID list

　ListSearchコントロールのTargetControlIDプロパティは、リスト検索機能を付与するDropDownList／ListBoxコントロールを指定するものだ。これによって、ListBoxコントロールlistにListSearchコントロールの機能が追加されることになるわけだ。

　なお、ListSearchコントロールのそのほかのプロパティを設定する場合、（ListSearchコントロールではなく）関連付けたDropDownList／ListBoxコントロールのプロパティとして設定する必要がある点に注意してほしい。本稿の場合であれば、DropDownList／ListBoxコントロールのプロパティ・ウィンドウに「slist（ListSearchExtender）」という項目が追加されているので、この項目の配下から個々の値を設定する。

　ListSearchコントロールで利用可能な主なプロパティは以下のとおり。

プロパティ	概要
TargetControlID	検索機能を関連付けるListBox／DropDownListコントロールのID値
PromptText	ListBox／DropDownListコントロールにフォーカスした場合に表示するプロンプト・メッセージ
PromptCssClass	プロンプト・メッセージの表示に適用するCSSクラス
PromptPosition	プロンプト・メッセージをListBox／DropDownListコントロールの上下いずれに表示するか（Top｜Bottom。デフォルトはTop）
ListSearchコントロールの主なプロパティ

　PromptTextプロパティは、リストにフォーカスしたタイミングで、検索リストの上下いずれかに表示するプロンプト・メッセージを表す。このプロパティで設定された値は、エンド・ユーザーによって文字が入力された場合に、その文字で置き換えられる。ただし、執筆時点のバージョンではPromptTextプロパティにマルチバイト文字列を指定した場合に、（入力文字がシングルバイト文字であっても）一部文字化けするようだ。致命的な不具合とまではいえないが、PromptTextプロパティを設定する場合は注意してほしい。

　なお参考までに、ここまでにVisual Studio 2005で自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではListBoxコントロール配下のプロパティとして設定したPromptTextプロパティなども、コード上はListSearchコントロールの属性として記述されていることが確認できるはずだ。

　以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、ListBoxコントロールにフォーカスを移動したうえでテキストを入力すると、それに合致した項目にフォーカス移動することが確認できるはずだ。

　なお、ListSearchコントロールは、機能上、以下のような制限もある。

• SafariではListBoxコントロールのみ利用可能（DropDownListコントロールは不可）
• OperaではListBox／DropDownListコントロール上でバックスペースをタイプした場合、デフォルトで前のページに移動してしまう（キーボード設定を変更することで回避は可能）

　ListSearchコントロール自体があくまで補助的な入力支援機能であることを考えれば、さほどに致命的な制約ではないかもしれないが、不特定多数のクライアントがアクセスする環境でListSearchコントロールを利用する場合には注意してほしい。

この記事と関連性の高い別の.NET TIPS ［ASP.NET AJAX］AutoCompleteコントロールでGoogleサジェスト風なオートコンプリート機能を実装するには？ ［ASP.NET AJAX］PagingBulletedListコントロールでページング可能な個条書きリストを定義するには？ ［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？ ［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？ ［ASP.NET AJAX］ComboBoxコントロールでWindowsフォーム・ライクなコンボボックスを作成するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）