BootStrap3とselect2を組み合わせてみた。 - またどこかでCTOっぽいことやってる人のブログ

実はデザインセンスが全くありません。
「お。このサイトいいな！」とは思うことはもちろんありますが、そこまでです。
自分で作れません。白状すると、CSS大嫌いです。
なので、とりあえず組み合わせると使えるBootStrapは大好きです。

とは言え。
BootStrapを使うと、いわゆる「BootStrap臭」が漂うサイトになってしまいます。
管理画面なんかであれば別にいいと思うんですけどね。
公開するようなサイトだとちょっとカッコつきません。
なんですが、大事なことは機能を作って動作して、公開することなのでいつもいつもデザインを後回しにしてしまいます。

さておき。
2016年現在、こつこつ作っている個人サイトはCakePHP3 + mySQL + BootStrap3で作成しているのですが、どこかの凄い人が作ったJQueryも使っています。

今回使ってみたのは「select2」というJQueryライブラリ。
Select2 - The jQuery replacement for select boxes

これ、セレクトボックスでサジェスト検索ができちゃう素敵なライブラリです。
セレクトボックスの下にテキストボックスが出てきて入力するとサジェスト。
実装もサーバサイドでデータ取ってきてセットするだけ。お手軽です。

実装自体はマニュアルやサンプルがあるのですぐなんですが、今回はこのselect2をBootStrap3のモーダルウィンドウで表示したかったんですね。

でも、表示はできてもテキスト入力が効かない。
これだとただのセレクトボックスです。残念な結果です。

そんな時はモーダルウィンドウを表示しているトコから「z-index:-1」を取ってしまいましょう。
よくよく考えたら確かにそうなんですけどね。
辿り着くまでに時間がかかったので、覚書しつつどこかの誰かの役に立てばいいなと思いつつ書いておきました。

select2絡みでもうひとつ。
マニュアルに書いてあるプレースホルダが、自分の環境ではどうしてもできなくて。
プレースホルダ代わりに文字列を埋め込むのもアレだなと思っていたのですが、これは結局セレクトボックスの方を対応して解決しました。
結果としてこんなコードになりましたので、載せておきます。

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-top-5">
  <select id="selectSample" class="form-control" style="width: 100%" onChange="なんか処理();">
    <option value='' disabled selected style='display:none;'>ここにプレースホルダ</option>
    <?php echo $ここにセレクトボックスに表示するリスト; ?>
  </select>
</div>

そうそう。
「selectSample」にwidthを100%指定しているのはBootStrapのグリッドを合わせるためです。
普通に書いた感じだと上手くグリッドが適用されなかったので、こんな処理入れてます。
これだと上手くいくので、現状こんな形にしてます。

まぁ雑ですね。