仕組みを覗いてみる
内部の作りを理解することで、できることとできないことが見えてくるものです。
では、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でごにょごにょすればできないこともないですが…
オススメはしません。
バージョンアップのたびに追随していかなくてはいけなかったり、予期せぬ不具合を踏むことにもなりかねません。