Select2

是一個 jQuery 套件，官方介紹是「提供了一個可自訂的選擇框，支援搜尋、標記、遠端資料集、無限滾動和許多其他常用選項」，但我自己最常用的是自動完成。

目錄
一、安裝
  1. 下載
  2. 載入 Javascript
  3. 載入 CSS
二、使用
  1. HTML
  2. 初始化

一、安裝

1. 下載

我是透過 npm 下載以下兩個套件：

npm i select2
npm i select2-theme-bootstrap5

第一個是 select2 主要程式。
第二個是 select2 的 bootstrap 主題。

2. 載入 Javascript

require("select2");
require("../../node_modules/select2/dist/js/i18n/zh-TW.js");
$.fn.select2.defaults.set("theme", "bootstrap");

第 2 行載入中文語系。
第 3 行預設使用 bootstrap 主題。

3. 載入 CSS

@import "select2";
@import "select2-theme-bootstrap5";

第 2 行載入 bootstrap 主題。

二、使用

1. HTML

<select class="form-control select2">
    <option value="1">AAA</option>
    <option value="2">BBB</option>
    <option value="3">CCC</option>
</select>

2. 初始化

$(document).ready(function() {
    $('.select2').select2();
});

參考文件

• Select2