HRR Co., Ltd.

技術的な記録を残していくことを目的としています。1次情報を大事にしています。

Chosenプラグインの使い方(発展編)

はじめに

Chosenプラグインネタ、第3弾です。

hrroct.hatenablog.com

hrroct.hatenablog.com

Webアプリを作成していると、どうしてもデフォルトの機能では仕様を満たせないこともあります。
そんな発展的な使い方を迫られている方に、お届けします。

仕組みを覗いてみる

内部の作りを理解することで、できることとできないことが見えてくるものです。
では、Chosenプラグインでは、どのような仕組みでステキなUIを実装しているのでしょうか。

ブラウザについている開発者ツールを使って、ソースコードを見てみましょう。
バージョンは下記の通りです。
jQuery 3.1.1
Chosen 1.6.2

<select id="target">
  <option></option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
</select>

上記がベースとなるselectタグです。
これに対して、

$('#target').chosen();

を実行すると…

<select id="target" style="display: none;">
  <option></option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
</select>

<div class="chosen-container chosen-container-single chosen-container-active chosen-with-drop" style="width: 94px;" title="" id="target_chosen">
  <a class="chosen-single">
    <span>1st Option</span>
    <div><b></b></div>
  </a>
  <div class="chosen-drop">
    <div class="chosen-search">
      <input type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
      <li class="active-result result-selected highlighted" data-option-array-index="1">1st Option</li>
      <li class="active-result" data-option-array-index="2">2nd Option</li>
      <li class="active-result" data-option-array-index="3">3rd Option</li>
    </ul>
  </div>
</div>

こうなります。
コード量が増えたことに、私はビックリでした。
そして、selectタグが"display: none;"で見えなくなっていることにもビックリ。
まるっきり、新しいタグを生成しているんですね。

この構造を知ると、

$('#target').trigger('chosen:updated');

という更新イベントを頻繁に実行しなくてはならない理由もわかります。
また、同時にあまり外から手を加えられないこともわかります。

というわけで

さらなるカスタマイズを望む場合、自動生成された部分をいじくる必要が出てきます。
自動生成後にJavaScriptでごにょごにょすればできないこともないですが…

オススメはしません。
バージョンアップのたびに追随していかなくてはいけなかったり、予期せぬ不具合を踏むことにもなりかねません。

最後に

これでChosenプラグイン3部作は完了となります。
どなたかの一助となることを祈っております。

以上でした!