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

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

　「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のデータベースをもとに検索される

対象読者

　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