Yaneu Labs --- JavaScriptによるオートコンプリート機能つきインプットボックスの実現

*[hatefu:labs.yaneu.com/20090307/] JavaScriptによるオートコンプリート機能つきインプットボックスの実現

私はASP.NETでとある会社の根幹システムを製作しているのだが、今回問題となったのは、ブラウザ上でおばちゃんおねーさんが入力する画面である。その画面で「会社名を数文字入力するとオートコンプリートして欲しい」と言われた。

取引先の会社名は限られているのでAjaxで取りに行かなくとも事前にブラウザに読み込ませて良い。そうだ、担当者も丸々読み込ませよう。全然、今風じゃないのだけど、そう思った。

こんなものは、ASP.NETの標準コンポーネント化されていてもおかしくないと思うのだけど、何か作りかけの匂いがプンプンするASP.NETにそんなことを望むのは酷なのかもしれない。

# 作りかけの匂いがプンプンするASP.NET
正直、ASP.NETとその周辺はどうなのよ
http://d.hatena.ne.jp/yaneurao/20090304


まあ、こんなものぐらいJavaScriptで誰かが書いているだろうと気軽に考えていたのだが、案外そうでもない。今回求められているのは、

** 候補の一覧が表示されること。

どうせ、静的に読み込んでいるのだから、一覧は表示できて欲しい。でも、100件は超すだろうから、そんなものが画面に一気に出てくると操作しにくいので、ページめくりのような形ででも表示されて欲しい。

** ローマ字やふりがなで何文字か入力して、その候補が出ること。

ローマ字やふりがなは事前に用意されていると仮定して良い。つまり、

>>
 ['株式会社やねうらお','かぶしきがいしゃやねうらお','kabushikigaisyayaneurao'],
<<

のようなJavaScriptによる定義リストを用意したい。もちろん、「yane」と入力すれば、「株式会社やねうらお」の部分が候補にあがってきて欲しい。つまり、一つのアイテムに対して、複数の入力候補を登録できることが大切。

** 半角および全角スペースでAND条件として検索できること。

「y urao」と入力すれば、「y」を含み、かつ「urao」を含む候補が出てきて欲しい。半角スペースだけでなく全角スペースにも対応させるのは、入力するおばちゃんおねーさんが全角のままスペースを入力しかねないからである。

** 日本語に対応していること

当然だが、会社名を入力するのに使うので日本語に対応していないと嫌だ。

** 静的に候補が設定できること。

Ajaxで使いたいんじゃないのよ、Ajaxで！

** マッチしている部分が強調されて欲しい。

インクリメンタルサーチなのにどこが一致しているのかわからないのは嫌だ。


以上の要件を満たすインプットボックスは探しても見あたらなかった。望む機能に一番近かったのは suggest.js - 入力補完ライブラリ http://www.enjoyxstudy.com/javascript/suggest/ だ。幸い、この程度の規模のものならJavaScriptのソースならば改造は比較的容易なのでこれをベースに改造することにした。

* こんなんでましたー

早速改造してみた。私は上の要件を満たせばいいので、suggest.jsにもともと備わっている他の機能の動作は保証しない。

# サンプルコード
テスト用のページ
http://labs.yaneu.com/20090307/test.html
ソースコード
http://labs.yaneu.com/20090307/yane_suggest_v101.zip

上のページで是非試して欲しい。どうだろうか？あなたのお気に召すだろうか？


ソースは元のライセンス形態のまま(MIT-style license)としておく。

より使いやすいものに改造が出来たら私に教えて欲しい。

* ASP.NETコンポーネント化

次に、これをASP.NETのコンポーネント化する。
JavaScriptを使ったコンポーネントを作るのは、以下の手順を踏む。

** Page_Loadで、ClientScriptManager csMgr = Page.ClientScript;として、こいつにJavaScriptのソースを出力。Perlのようなhere document記法がC#には無いので、結構面倒だけど。

** Page_Loadのなかなら、this.IDが、このユーザーコントロールに与えられたunique ID名であることは保証されているので、JavaScriptで使う変数名などは、 this.ID + '_VAR'だとか、this.ID + '_LIST' だとかして、unique性を確保する。

** CSSを分離。CSSはhtmlのhead部で読み込まれているほうが好ましいので次のようにするだとか。

>>
	var myHtmlLink = new HtmlLink();
	myHtmlLink.Href = cssFileName;
	myHtmlLink.Attributes.Add("rel", "stylesheet");
	myHtmlLink.Attributes.Add("type", "text/css");
	Page.Header.Controls.Add(myHtmlLink);
<<

# ASP.NET用コンポーネント
以上の手順でASP.NET用コンポーネント化したもの
http://labs.yaneu.com/20090307/yane_suggest_asp.net_v101.zip

これまた、MIT-style licenseとしておく。ASP.NETなら、このユーザーコントロールをマウスでドラッグして、そのプロパティを設定するだけで使えるので非常に便利だと思う。ASP.NETのそういう利点はもっと評価されていいと思うんだけどね。


* 更新履歴

2009.07.24 複数キーワードで検索したときに、それらのキーワードのすべての一致部分が強調表示されるように修正。
2009.03.07 公開