CodeZine(コードジン)

特集ページ一覧

オートコンプリート機能を持つASP.NETアプリケーションの作成

C1AutoCompleteコントロールを使ったWebアプリケーションの作成

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/06/27 17:50
目次

C1AutoCompleteコントロールの概要

 C1AutoCompleteコントロールは、Ajaxに対応しオートコンプリート検索ボックスを作成するコントロールです。検索ボックスは、テキストボックスでの入力に応じて、Ajaxで入力候補のリストを取得してリアルタイムで表示します。

 オートコンプリート機能は、データ検索用の「ラベル」とその「値」「カテゴリ」にデータを設定すると、入力文字列をもとに「ラベル」を検索し、一致する「値」を検索ボックスに表示します。

 例えば、次のようにWebページにC1AutoCompleteコントロールを配置し、「Label」および「Value」プロパティにデータを設定します。

「Label」および「Value」プロパティに設定するデータ(ヘルプより抜粋)
「Label」および「Value」プロパティに設定するデータ(ヘルプより抜粋)

 アプリケーションを実行して、検索ボックスに「ラベル」に設定したテキストの一部を入力すると、入力テキストに一致した「ラベル」がリスト表示され、リスト項目を選択するとその「ラベル」に対応する「値」が検索ボックスに表示されます。

検索ボックスに「ja」と入力すると一致する「ラベル」がリスト表示される(オンラインデモより抜粋)
検索ボックスに「ja」と入力すると一致する「ラベル」がリスト表示される(オンラインデモより抜粋)

 検索データは、このようにコントロールに直接設定することができ、またデータベース連結でデータベースから取り出すことも可能です。

C1AutoCompleteコントロールの主な特徴

 C1AutoCompleteは、LoadOnDemand、DataBinding、AutoPostBack、AutoCompleteの位置決め、MaxCount、MinLength、および組み込みテーマなど、いくつかの独特な機能を備えています。

LoadOnDemand

 AutoComplete for ASP.NET WijmoはAjaxに対応し、情報を動的にロードできます。子項目は、検索ボックスに入力するときにロードされます。

DataBinding

 C1AutoCompleteコントロールでは、ラベル、値、およびカテゴリフィールドを、いろいろなデータベースのデータソースにバインドできます。

AutoPostBack

 AutoPostBackプロパティにより、C1AutoCompleteコントロールの入力内容を他のコントロールで使用する際に、サーバーにポストバックできます。

位置決め

 関連付けられた入力要素に対するコントロールの位置を設定できます。

MaxCount

 C1AutoCompleteコントロールでは、コールバックの結果をリスト表示する際の最大項目数を制御できます。このプロパティを使用するには、データソースを指定し、LoadOnDemandプロパティを"true"に設定します。

MinLength

 MinLengthプロパティを使って、ユーザーが入力する必要がある最小文字数を制御します。

テーマ

 スマートタグを使って、プレミアムテーマからコントロールの外観を変更できます。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成することも可能です。

CSSのサポート

 CSS(Cascading Style Sheet)のスタイルを使用して、カスタムスキンの定義が可能です。CSSのサポートにより、検索ボックスを組織の基準に合致させることができます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5