• かちびと.net

    フォームのselect要素内をインスタンス検索出来るようにし、美しいデザインにも変更できるjQueryプラグイン・Chosenのご紹介。かなり便利ですねーこれ。入力時の離脱率も減らせそうです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

フォームの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>
                ・
                ・
                ・

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

雑感

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

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

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

Chosen

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services