はじめに
都道府県や国名、担当者一覧など、選択肢が数十〜数百件あるフォームを作ったことはありませんか。標準の<select>タグは、選択肢が増えるほど目的の項目を探すのが大変になります。マウスでスクロールし続けるか、キーボードで頭文字を連打するしかなく、ユーザー体験としてはお世辞にも良いとは言えません。
Select2は、この標準<select>を検索可能なドロップダウンに置き換えるjQueryプラグインです。既存の<select>要素に対して1行のJavaScriptを実行するだけで、インクリメンタルサーチ・複数選択・タグ入力・リモートデータの非同期検索といった機能が手に入ります。2012年から続くライブラリですが、2万5千を超えるGitHubスターを維持し、今も更新が続いている息の長い定番です。
とはいえ、説明を読むより先に動くものを見た方が早いと思います。標準のselectがSelect2でどう変わるのかをブラウザ上でそのまま試せるようにしたので、先に挙動を見たい方はこちらからどうぞ。
Select2とは
Select2は「The jQuery replacement for select boxes」を掲げるUIライブラリです。既存のHTMLの<select>要素をラップする形で動作するため、フォームの送信データやサーバーサイドのバリデーションロジックを変更する必要がありません。見た目と操作性だけをリッチにできる点が、長年使われ続けている理由です。
主な特徴
- インクリメンタルサーチ - 入力するたびに選択肢が絞り込まれるため、数百件の選択肢からでも目的の項目にすぐ辿り着けます
- 複数選択・タグ入力 -
multiple属性のselectをタグチップ形式のUIに変換でき、tags: trueでユーザー自身に新しい選択肢を作らせることもできます - リモートデータ対応 - Ajaxと組み合わせて、サーバー側で検索を行う大規模なリストにも対応できます
- カスタムテンプレート -
templateResult・templateSelectionで選択肢の表示をHTMLごと差し替えられ、アイコンや補足情報を添えられます - 多言語・RTL対応 - 40以上の言語ロケールが用意されており、右から左に書く言語のレイアウトにも対応しています
インストール
npm経由でインストールする場合は、jQueryも合わせて必要です。
npm install jquery select2
CDNから読み込む場合は、CSSとJSをそれぞれ<head>と</body>直前に追加します。
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/js/select2.min.js"></script>
Select2のサンプルを動かす
下のフォームは、5つの選択肢を持つ<select>要素に$(selector).select2()を1回呼び出しただけのものです。クリックして開き、「めろん」のように文字を入力してみてください。候補が即座に絞り込まれます。選択後に出てくる×ボタンでは、allowClearオプションによる選択解除も試せます。
要点は次のとおりです。select2()の呼び出し時に渡すオプションで、プレースホルダーや解除ボタンの有無を制御しています。
$('#fruit').select2({
placeholder: '好きな果物を選択',
allowClear: true,
})
$('#fruit').on('change', function () {
console.log('selected:', $(this).val())
})
実際に動かせるものが下です。CDNのバージョンを固定したjquery@3.7.1とselect2@4.1.0を読み込んでいます。
<select>の中身も選択肢の絞り込み対象もHTML標準のままなので、サーバーへ送信されるフォームの値は普通の<select>と変わりません。placeholderを空文字に変えたり、allowClear: falseにしたりすると、UIがどう変化するか見比べてみてください。
基本的な使い方
Select2を使う最小構成は、対象の<select>要素に対してselect2()を呼び出すだけです。
<select id="mySelect">
<option value="ja">日本語</option>
<option value="en">英語</option>
<option value="fr">フランス語</option>
</select>
$(document).ready(function () {
$('#mySelect').select2()
})
これだけで、通常の<select>が検索可能なドロップダウンに変わります。オプションを渡す場合はselect2({ ... })の引数に設定オブジェクトを渡します。よく使うオプションは次のとおりです。
| オプション | 説明 |
|---|---|
placeholder |
未選択時に表示するテキスト |
allowClear |
選択解除用の×ボタンを表示するか |
width |
要素の幅（'resolve'でCSS側の幅を継承） |
minimumInputLength |
検索候補を出すのに必要な最小文字数 |
theme |
'classic'や'bootstrap-5'などの見た目テーマ |
実践的なユースケース
複数選択とタグ表示
選択肢を1つに絞る必要がない場面、たとえば「担当者を複数人アサインする」「興味のあるカテゴリを選ぶ」といったフォームでは、<select multiple>をそのままSelect2に渡すだけで、選択済みの項目がタグチップとして横に並ぶUIになります。maximumSelectionLengthで選択数の上限も設定できます。
4つ目を選ぼうとすると、上限に達している旨のメッセージが表示されます。maximumSelectionLengthの数値を変えて、上限がどう変わるか試してみてください。
ユーザー入力による動的タグ作成
あらかじめ用意した選択肢だけでなく、ユーザー自身に新しい値を入力させたい場面もあります。ブログ記事のタグ付けや、ラベルの自由入力などが典型例です。Select2ではtags: trueを指定するだけで、入力した文字列がそのまま新しい選択肢として追加されるようになります。
$('#tags').select2({
tags: true,
tokenSeparators: [',', ' '],
})
tokenSeparatorsにカンマやスペースを指定すると、区切り文字を打つたびに自動でタグが確定します。
既存の候補にない文字列を入力すると「〇〇を追加」という選択肢が現れ、選ぶとその場でタグ化されます。tokenSeparatorsを[]にすると、区切り文字での自動確定が無効になる違いも確認できます。
選択肢のカスタム表示
国名の一覧に国旗を添えたり、担当者一覧にアバター画像を出したりと、選択肢をテキストだけでなくHTMLで装飾したい場合はtemplateResult（候補リスト側）とtemplateSelection（選択後の表示側）を使います。それぞれ<option>のdata-*属性から情報を取り出し、jQueryオブジェクトとして返すのがポイントです。
function formatCountry(option) {
if (!option.id) return option.text
const flag = $(option.element).data('flag')
return $(`<span>${flag} ${option.text}</span>`)
}
$('#country').select2({
templateResult: formatCountry,
templateSelection: formatCountry,
})
templateResultだけを差し替えると候補リストのみ国旗付きになり、選択後の表示はテキストのままになります。両方を同じ関数にすることで、見た目の一貫性を保っています。同じ要領で、ユーザー一覧ならアバター画像の<img>タグを返す、といった応用ができます。
まとめ
Select2は、標準の<select>をラップするだけで検索・複数選択・タグ入力・カスタム表示を実現できるjQueryプラグインです。フォームの送信値やバリデーションを変えずに使い始められる手軽さと、templateResultのような柔軟な拡張ポイントを兼ね備えており、リリースから10年以上経った今も現役で使われ続けています。
選択肢が多いフォームで標準の<select>に限界を感じたら、まずは1つの要素にselect2()を呼び出すところから試してみてください。オプションを1つずつ足していくだけで、必要な機能を段階的に追加できます。