JavaScript
jQuery
js
library
ライブラリ

【JavaSctipt】Chosenでselectボックスをおしゃれにする【ライブラリ】

selectのプルダウンを、ちょっとおしゃれで便利にしてしまうJavaScriptのライブラリ「Chosen」の紹介です。
本家:Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes :link:

1.ダウンロード

GitHubから適当なバージョンのファイルをダウンロードします。
zipファイルなので、ダウンロードしたら解凍しておきましょう。

2.インストール

上記1.で解凍したフォルダの中身はこんな感じ:arrow_down:

chosen_v1.y.z
└docsupport
 └init.js★
 └jquery-3.2.1.min.js★
 └・・・(省略)
└chosen.jquery.js★
└chosen.jquery.min.js
└chosen.css★
└chosen.min.css
└chosen-sprite.png★
└・・・(省略)

この中から、★がついた5つのファイルを、Chosenを使いたい案件フォルダにコピーします。[min]のファイルでもOKです。
注意すべきなのは、chosen.cssと同じ階層にchosen-sprite.pngを置くことです。
そして、htmlの中でパスを指定します。

<link rel="stylesheet" href="./css/chosen.css">
<script src="./js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="./js/chosen.jquery.js" type="text/javascript"></script>
<script src="./js/init.js" type="text/javascript" charset="utf-8"></script>

補足

Chosenは「これ1つで完璧:notes:」なので、jQueryなど、別途必要なライブラリも全て同梱されてます。
なので、ディレクトリ構造を意識しないのであれば、解凍したchosen_v1.y.zを丸ごとコピペすれば完結します:smiley:

ただ、まぁ、実際の現場・案件で使うと「こんなディレクトリ構造は嫌だ」ってなったり、ドキュメント用のindex.htmlが混ざっていたりするので、まるごとコピーするのはちょっと乱暴かなーと:sweat_drops:

3.使ってみる

普通に書いたselectボックスはこうなります:arrow_down:が・・・。
chosen_01_100.png

Chosenを使うとこんな感じ:arrow_down:になります。
chosen_02_100.png

さらに、一部を入力して部分一致検索もできちゃいます:exclamation:
chosen_03_100.png

ソースコードはこちら:pencil2:

<script type="text/javascript">
$(document).ready(function() {
  $(".chosen-select").chosen(); <!--★★ここと対応する!-->
});
</script>

<select class="chosen-select"> <!--★★ここのchosen-selectが・・・-->
  <option value=""></option>
  <option value="Australia">Australia</option>
  <option value="Brazil">Brazil</option>
  <option value="China">China</option>
  <option value="Finland">Finland</option>
  <option value="France">France</option>
  <option value="Japan">Japan</option>
  <option value="Malaysia">Malaysia</option>
  <option value="Monaco">Monaco</option>
  <option value="Russian Federation">Russian Federation</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="United States">United States</option>
</select>

HTML側ではselectボックスにclassを指定し、js側でchosen()メソッドを呼び出すだけです。
プルダウンの中身が多い時に、部分一致検索ができるのは、とっても便利です:star:
ちなみに、multiple="multiple"って複数選択可能にした場合も、全く同じjsで対応可能です。

4.少しこだわってみる

4-1.プレースホルダーを変更する

さて、普通に$(".chosen-select").chosen();すると、このように「Select an Option」と表示されてしまいます。
※この画像、幅が小さいので見切れてますが・・・:scissors:
chosen_04_100.png
これをオリジナルの文言に変更するには、2つの方法があります。

A)selectタグで設定する

selectタグにdata-placeholderを設定すればOK:ok_hand:です。

<select class="chosen-select" data-placeholder="国の名前"> <!-- ★ここ★ -->
  <option value=""></option>
  <option value="Australia">Australia</option>
  <option value="Brazil">Brazil</option>
  ・・・(省略)
  <option value="United States">United States</option>
</select>

B)jsで初期値を設定する

$(".chosen-select").chosen();のオプションとして、「placeholder_text_single」を指定すればOK :ok:

<script type="text/javascript">
$(document).ready(function() {
  $(".chosen-select2").chosen({
    placeholder_text_single : "ぷれーすほるだ。"
    <!-- ★★マルチの時は「placeholder_text_multiple-->
  });
});
</script>

ちなみに、chosen.jquery.jsの中でデフォルト値が入る設定になっているので、表示させたくない場合は、chosen.jquery.jsを直接書き換えてください(・・・って公式に書いてあった :sweat_smile:)。

4-2.横幅を変更する

上記4-1.で作ったselectボックスは、横幅が狭くてプレースホルダーが見切れていました。
chosen_04_100.png
これではかっこ悪いので、widthオプションを指定します。

<script type="text/javascript">
$(document).ready(function() {
  $(".chosen-select").chosen({
    width: "300px" <!-- ダブルクォートで囲めば%表記も可 -->
  });
});
</script>

chosen_05_100.png
はい:exclamation:赤い矢印で示した部分が300pxになりました:cherries:
プレースホルダもプルダウンの値もすっきりしましたね。

まとめ

以下2つが出来れば、とりあえず使えそうです。
1. jQuery含め4つのファイルのパスを通す。
2. selectボックスにclass名を指定して$(".chosen-select").chosen();する。

他にもいろいろオプションがあるので、必要に応じてChosenの公式サイト :link:を参照すればよいと思います。

おまけ

公式サイトのsetupが面白かったので、意訳してみました:joy:
1. ダウンロードして、あなたのアプリケーションにChosenのファイルをコピーしてください。
2. Choseを効かせたいselectボックスに対して$(".chosen-select").chosen()と書いてください。
3. あとはdiscoしようぜ:sparkles: ←え?

公式サイトではdiscoのとこにリンクが張られているので、ぜひ飛んでみてください:wink: