バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法

サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今まではjQueryプラグインの「select2」を使っていたがバニラJavaScriptで同じような機能を実装したいケースがあった。探したところ「Choices.js」が良さそう。以下に実装方法をメモ。

Choices.js

公式サイト

https://choices-js.github.io/Choices/

GitHub

https://github.com/Choices-js/Choices

CDN

CDNで使う場合は以下を記述する。

<link rel="stylesheet" href="https://choices-js.github.io/Choices/assets/styles/base.min.css">
<link rel="stylesheet" href="https://choices-js.github.io/Choices/assets/styles/choices.min.css">
<script src="https://choices-js.github.io/Choices/assets/scripts/choices.js"></script>

サンプル

https://taitan916.info/sample/Choices.js/

実装方法

ソースコード

<div class="section">
    <div>オプション指定なし</div>
    <select class="choices_1">
        <option value="">選択してください</option>
        <option value="1">大トロ</option>
        <option value="2">マグロ</option>
        <option value="3">ねぎとろ</option>
        <option value="4">中トロ</option>
        <option value="5">サーモン</option>
    </select>
</div>

<div class="section">
    <div>複数選択可</div>
    <select class="choices_2" multiple>
        <option value="">選択してください</option>
        <option value="1">大トロ</option>
        <option value="2">マグロ</option>
        <option value="3">ねぎとろ</option>
        <option value="4">中トロ</option>
        <option value="5">サーモン</option>
    </select>
</div>

<div class="section">
    <div>複数選択可&ページ表示時にサーモンを選択済み</div>
    <select class="choices_3" multiple>
        <option value="1">大トロ</option>
        <option value="2">マグロ</option>
        <option value="3">ねぎとろ</option>
        <option value="4">中トロ</option>
        <option value="5" selected>サーモン</option>
    </select>
</div>

<link rel="stylesheet" href="https://choices-js.github.io/Choices/assets/styles/base.min.css">
<link rel="stylesheet" href="https://choices-js.github.io/Choices/assets/styles/choices.min.css">
<style>
body{
    background-color: initial;
}
.choices__list--multiple .choices__item,
.choices__list--multiple .choices__item.is-highlighted
{
    background-color: #aaa;
    border: 1px solid #aaa;
    border-radius: 4px;
}
.choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button{
    border-left: 1px solid #aaa;
}
.choices__input{
    width: initial !important;
}
</style>
<script src="https://choices-js.github.io/Choices/assets/scripts/choices.js"></script>
<script>
const option = {
    removeItemButton: true, //削除ボタン表示
    maxItemCount: 3, //最大選択可能数
    maxItemText: (maxItemCount) => { //最大選択可能数に達した場合のメッセージ
        return `最大${maxItemCount}つまで選択可`;
    },
    itemSelectText: `クリックで選択`,
};
const choices_1 = new Choices(document.querySelector('.choices_1'), option);
const choices_2 = new Choices(document.querySelector('.choices_2'), option);
const choices_3 = new Choices(document.querySelector('.choices_3'), option);

</script>

解説等

base.cssについて

base.cssはbodyのbackground-color等、セレクトメニュー以外の部分もCSSが指定されているため、別途CSSを追記していく必要がありそう。そのためインラインで色々CSSを指定している。

ページ表示時に選択済みにしたい場合

選択済みにしたいoptionタグに対してselectedを付与すること。JavaScript側での指定は不要。