Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 「AutoComplete for ASP.NET Wijmo」のC1AutoCompleteコントロールを使って、空港名と都道府県の読みから空港名をリストアップする、オートコンプリート機能付き検索ボックスを持つWebアプリケーションを作成してみます。

目次

はじめに

 Webブラウザや日本語入力システムでは、「オートコンプリート機能」がサポートされています。これは、一度入力したテキストをブラウザ側で記憶し、同じテキストを入力する際にテキストの一部を入力するだけで、すべて自動で入力してくれる機能です。しかし、用途はあくまでも「同じテキストの入力」に限られています。

 このオートコンプリート機能をカスタマイズして、いろいろなデータ入力に利用できると使いやすいUIを構築できるのではないでしょうか。

 「ComponentOne Studio for ASP.NET Wijmo 2013J」に含まれるAutoComplete for ASP.NET WijmoのC1AutoCompleteコントロールは、カスタムオートコンプリート機能を持った検索ボックスをWebページに実装できるコントロールです。

 コントロールには「ラベル」と「値」をセットし、検索ボックスに「ラベル」に一致するテキストを入力すると、ボックスに「値」を表示します。「ラベル」と「値」は自由に設定でき、データベースとの連結も可能ですから、データが大量であればリストボックスよりも使いやすい入力インターフェースになります。

 そこで今回は、空港名と都道府県の読みから空港名をリストアップする検索ボックスを持ったWebアプリケーションを作成してみました。

読みを入力すると候補がリスト表示される
読みを入力すると候補がリスト表示される
読みを選ぶと空港名が入力される
読みを選ぶと空港名が入力される
データはSQL Serverのデータベースをもとに検索される
データはSQL Serverのデータベースをもとに検索される

対象読者

 Visual Basic 2010/2012、またはVisual C# 2010/2012を使ってプログラムを作ったことがある人。

必要な環境

 Visual Basic 2010/2012、Visual C# 2010/2012、Visual Studio 2010/2012でプログラムが作れる環境。

 対応ブラウザについては、グレープシティ社Webサイトの「クロスブラウザ対応ページ」でご確認ください。

 なお、本プログラムは次の環境で開発・動作確認を行っています。

  • OS:Windows 7
  • 開発Tool:Visual Studio 2010、.NET Framework 4
  • ブラウザ:Microsoft Internet Explorer 10

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

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

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