セレクトボックスを美しくサジェスト機能などを追加できるjQueryプラグイン

Select2WordPressを使ったデータベースの制作にあたって階層カテゴリにある項目に素早く選択するために、セレクトボックスにサジェスト機能が付いた検索ができればと思いjQueryのプラグインを探してみました。

Select2とは

Select2は、検索、タグサポート、リモートデータのサポートなど様々なカスタマイズを可能にするセレクトボックスのjQueryプラグインです。

シングルセレクトボックス

対象の要素(.js-example-basic-single)に対してselect2を実行します。

<script type="text/javascript">
$(document).ready(function() {
  $(".js-example-basic-single").select2();
});
</script>

<select class="js-example-basic-single">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Demo

マルチセレクトボックス

対象の要素のセレクトボックスをmultipleに変更することで複数の項目を選択できるようになります。

<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Demo

プレースホルダ

プレースホルダテキストを表示する場合は、オプションのplaceholderにテキストを入力します。

$(".js-example-placeholder-single").select2({
  placeholder: "Select a state",
  allowClear: true
});
 
$(".js-example-placeholder-multiple").select2({
  placeholder: "Select a state"
});

Demo

選択数の制限

マルチセレクトボックスで選択数を制限できます。オプションのmaximumSelectionLengthで選択できる数値を入力します。

$(".js-example-basic-multiple-limit").select2({
  maximumSelectionLength: 2
});

Demo

タグ

タグ機能を有効にする場合は、オプションのtagsをtrueにします。新規のタグも追加可能です。

$(".js-example-tags").select2({
  tags: true
})

Demo