HTMLのセレクトボックスに検索機能を付ける

jQueryプラグイン「Select2」を使用する。

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Select2.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<!-- Select2本体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<!-- Select2日本語化 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/ja.js"></script>

続いて、セレクトボックスを追加。

<select class="test-select2">
  <option>　</option>
  <option>リンゴ</option>
  <option>ゴリラ</option>
  <option>ラッパ</option>
</select>

最後にSelect2用のスクリプトを記述。 日本語化を行うので、languageの設定も行う。

$(function() {
  $('.test-select2').select2({
    language: "ja" //日本語化
  });
})

複数選択する場合は、セレクトボックスにmultipleを付けるだけ

<select class="test-select2" multiple="multiple">
  <option>リンゴ</option>
  <option>ゴリラ</option>
  <option>ラッパ</option>
</select>