結構便利そうだったのでご紹介。フォームの
select要素内に羅列されたoptionから、入力
するだけで結果を表示するインスタンス検索
を可能にするスクリプト・Chosenです。表題
にはjQueryプラグインと書きましたが、この
スクリプトにはjQueryプラグインとprototype
の2つが用意されています。

optionの量が多くなってしまうことはよくあるので、この手のユーザビリティ向上系スクリプトは多く存在しますが、これはかなり便利ではないかなと思いました。似たようなのもうあるんですかね。

Chosen


通常のselectボックスでプルダウンさせると検索窓も表示、キーワードを入れるだけでソートしてくれます。いわゆるインスタンス検索が可能になるので大量のoptionが存在してもユーザーの利便性を全く損ないません。

デモ見たほうが早いですね。※追記:日本語だとFirefoxのみ動かないみたい。英語ならOKです

Demo※別窓


キーワードを入れればソートされますのでユーザーの入力作業がかなり短縮されそうです。


無いときもちゃんと教えてくれる。

フォームの入力作業中のサイト離脱率は割と指摘されますが、こうした配慮をしてあげるとかなり減らせそうですね。美しいデザインにも変えられるのもGoodです。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="chosen/chosen.jquery.js"></script>
<script> $(".chzn-select").chosen(); </script>

本体とプラグインとセレクタを書く。

<select title="都道府県検索" class="chzn-select" style="width:350px;" tabindex="2" id="single_example">
<option value=""></option> 
<option value="北海道">ほっかいどう(北海道)</option>
<option value="青森県">あおもり(青森県)</option>
<option value="岩手県">いわて(岩手県)</option>
                ・
                ・
                ・

マークアップもシンプルで済みます。

雑感

IE6、7でも動作はしますがレイアウトが崩れます。あと、もともと海外のスクリプトなので、日本語に対応させると少し工夫が必要かもですね。

現在はoptionのキーワードから検索していますが、日本語ならvalue内のキーワードで探せるようにしないと、いちいちひらがなを含めなくてはなりません。が、便利は便利なので暇を見て日本用にしたいですね。

ソースコードはgithubで公開されてます。

Chosen