フォームのselect要素内をインスタンス検索出来るようにし、美しいデザインにも変更できるjQueryプラグイン・Chosen

結構便利そうだったのでご紹介。フォームの
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>
　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　・

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