はじめに
本稿では、フリーのAutoSuggestBoxコントロールを使ってASP.NETアプリケーションに「Google Suggest」の機能を追加する方法を紹介します。こうした方法を説明する記事はインターネット上にたくさんありますが、多くは理屈ばかりで、すぐに使えるコードはあまり見当たりません。AutoSuggestBoxコントロールにはGoogle Suggestの機能がすべて詰め込まれているため、自動提示メニューを読み込むためのデータソースを指定するだけで、すぐに利用できます。
背景
Google Suggestをご存知でしょうか。Google Suggestは、Ajax（Asynchronous JavaScript+XML）の効果を示すためにGoogleが開発したアプリケーションです。最初はそのすばらしさに驚きますが、すぐに印象は薄れ、ほとんどの開発者はその存在を忘れてしまいます。その「クールさ」を認める人々は数多くいますが、他のWebアプリケーションへの組み込み方法は知られていません。
初めてこのコントロールを目にしたときは私も感心しました。ただ、すごいアイデアだとは思っても、どう使えばいいかわかりませんでした。そんな私が「Travelope」（詳細はこちら）という旅行アプリケーションの開発を始めたのは数ヶ月前のことです。航空運賃の検索フォームの作成にあたり、出発地と目的地を選択するためのシンプルなインターフェイスを検討していました。コンボボックスの利用を考えましたが、都市名が1,000近くあるため、フォームの読み込みに時間がかかってしまいます。別の方法として、テキストボックスのリンクを利用して都市名のルックアップウィンドウをポップアップさせることも考えましたが、この方法だとスペルを確認しようとするたびにリファレンスウィンドウを開く必要があります。結局、どちらの方法もいまひとつでした。何か良いアイデアはないかと他の旅行サイトを調べ始めたところ、多くのサイトで都市や空港の選択に「Google Suggest」風のコントロールが使われているのに気づいたのです。これなら「Travelope」にもぴったりだと思いました。ここからAutoSuggestBoxが生まれたというわけです。
AutoSuggestBoxとは
AutoSuggestBoxは、C#で書かれたカスタムコントロールです。これを使えば、自作のWebアプリケーションに「Google Suggest」風の機能を容易に追加できます。AutoSuggestBoxはC#とVB.NETをサポートしており、Internet ExplorerとFirefoxで動作します。このコントロールは、Ajaxの利用によって、ページ全体を更新することなくデータを取得します。また、CSSを使ってWebページ上でこのコントロールの外観を調整することができます。
デモはこちらからご覧いただけます。
