CodeZine(コードジン)

特集ページ一覧

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

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

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

C1AutoCompleteデザイナフォーム

 C1AutoCompleteコントロールには、専用デザイナ「C1AutoCompleteデザイナフォーム」が含まれています。

 このデザイナフォームは、C1AutoCompleteコントロールのプロパティやC1AutoCompleteDataItem(オートコンプリート項目)のプロパティを編集するためのデザイナです。

 C1AutoCompleteデザイナフォームは、プログラマがコントロールを視覚的に修正できる点では、プロパティウィンドウに似ています。しかしこのデザイナではC1AutoCompleteDataItemの選択、そのプロパティの設定、およびC1AutoCompleteコントロールの外観のプレビューまで、すべてをフォーム内で行うことができます。

 C1AutoCompleteデザイナフォームを開くには、C1AutoCompleteコントロールのスマートタグをクリックし、[C1AutoCompleteタスク]メニューから[オートコンプリート項目の追加]をクリックします。

C1AutoCompleteデザイナフォーム(ヘルプより抜粋)
C1AutoCompleteデザイナフォーム(ヘルプより抜粋)

C1AutoCompleteコントロールの要素

 C1AutoCompleteコントロールは、以下のような要素から構成されています。

入力要素(検索ボックス)

 入力要素を使用して、ユーザーは検索する項目を入力したり、AutoComplete要素から選択した項目を表示したりできます。

AutoComplete要素

 AutoComplete要素は、検索ボックスに入力したテキストに一致した「ラベル」を一覧表示する領域です。

C1AutoCompleteDataItems

 C1AutoCompleteDataItemsは、「ラベル」に設定したデータの中で検索に一致した「ラベル」です。

C1AutoCompleteコントロールの要素(ヘルプより抜粋)
C1AutoCompleteコントロールの要素(ヘルプより抜粋)

Webページのデザイン

 では、さっそくアプリケーションを作成していきましょう。

 作成するアプリケーションは、C1AutoCompleteコントロールにSQL Serverのデータ「空港一覧_Data.mdf」を連結し、フィールド「読み」に対して検索を行い一致する「読み」を一覧表示します。「読み」には空港名と都道府県名をひらがなで入力してあり、フィールド「空港名」には対応する空港名が入力されています。

 そして、C1AutoCompleteコントロールに空港名か都道府県名を入力すると、一致する「読み」をリスト表示します。

 C1AutoCompleteコントロールは、すべてプロパティの設定で行いますので、コードを一切書きません。

使用するSQL Serverのデータ「空港一覧_Data.mdf」
使用するSQL Serverのデータ「空港一覧_Data.mdf」

ページのレイアウト

 ページには、C1AutoCompleteコントロールを配置します。

 「SqlDataSource」は、C1AutoCompleteコントロールにデータベースファイルを設定した時に作成されるオブジェクトです。

ページレイアウト
ページレイアウト

  • 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