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

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

# １．ダウンロード
[GitHub](https://github.com/harvesthq/chosen/releases)から適当なバージョンのファイルをダウンロードします。
zipファイルなので、ダウンロードしたら解凍しておきましょう。

# ２．インストール
上記１．で解凍したフォルダの中身はこんな感じ: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★
└・・・（省略）
```
この中から、★がついた５つのファイルを、Chosenを使いたい案件フォルダにコピーします。[min]のファイルでもOKです。
注意すべきなのは、**chosen.cssと同じ階層にchosen-sprite.pngを置くこと**です。
そして、htmlの中でパスを指定します。

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

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

# ３．使ってみる
普通に書いたselectボックスはこうなります:arrow_down:が・・・。
![chosen_01_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/d97bd329-68cd-bedb-0c1b-2c99c202c0ed.png)

Chosenを使うとこんな感じ:arrow_down:になります。
![chosen_02_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/edcb36d1-0fd6-f9cb-0896-16002c98ec82.png)

さらに、一部を入力して部分一致検索もできちゃいます:exclamation:
![chosen_03_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/aada90bf-7801-fc87-b98c-810ee5ad113f.png)

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

```HTML
<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で対応可能です。

# ４．少しこだわってみる
## ４－１．プレースホルダーを変更する
さて、普通に```$(".chosen-select").chosen();```すると、このように「Select an Option」と表示されてしまいます。
※この画像、幅が小さいので見切れてますが・・・:scissors:
![chosen_04_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/aca0f0f3-8cfa-d2b1-1f9b-d5617a79ebba.png)
これをオリジナルの文言に変更するには、２つの方法があります。

### A）selectタグで設定する
selectタグに```data-placeholder```を設定すればOK:ok_hand:です。

```HTML
<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:。

```html
<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:）。

## ４－２．横幅を変更する
上記４－１．で作ったselectボックスは、横幅が狭くてプレースホルダーが見切れていました。
![chosen_04_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/7ec9991a-2b10-87a1-8a91-189b1940689a.png)
これではかっこ悪いので、widthオプションを指定します。

```html
<script type="text/javascript">
$(document).ready(function() {
  $(".chosen-select").chosen({
    width: "300px" <!-- ダブルクォートで囲めば％表記も可 -->
  });
});
</script>
```
![chosen_05_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/6183e8ec-4d57-95ad-3f00-16c0fbfcc149.png)
はい:exclamation:赤い矢印で示した部分が300pxになりました:cherries:
プレースホルダもプルダウンの値もすっきりしましたね。

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

他にもいろいろオプションがあるので、必要に応じて[Chosenの公式サイト](https://harvesthq.github.io/chosen/) :link:を参照すればよいと思います。

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

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