SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

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

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コントロールにデータベースファイルを設定した時に作成されるオブジェクトです。

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

次のページ
C1AutoCompleteコントロールの作成

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7230 2013/06/27 17:50

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング