高级元素
Tom Select
开始输入即可筛选列表；× 按钮
用来清除选择（
clear_button）。
输入以筛选，按 Enter 创建新标签，使用 × 按钮移除标签。
背后是一个模拟接口，挂着 72 条记录。
输入做了防抖处理（
loadThrottle）， 过期的请求会用
AbortController 取消掉， 滚动到列表底部时会自动加载下一页
（virtual_scroll）。
Flatpickr
选择一个开始日期，然后选择一个结束日期。
来自 Select2？
下拉菜单2 目前仍在维护，但它依然是个 jQuery 插件 — 没有不依赖 jQuery 的构建版本。 Tom Select 能覆盖同样的功能集， 体积大约只有 20 kB gzip， 而 Select2 算上 jQuery 之后大约是 ~50 kB。 两者的 API 几乎可以一一对应：
| 下拉菜单2 | Tom Select |
|---|---|
$("#x").select2() |
new TomSelect("#x") |
tags: true |
create: true |
allowClear: true |
plugins: ["clear_button"] |
closeOnSelect: false |
closeAfterSelect: false |
maximumSelectionLength: 3 |
maxItems: 3 |
minimumInputLength: 2 |
shouldLoad: (q) => q.length >= 2 |
ajax: { url, delay: 250 } |
load(query, callback) + loadThrottle: 250
|
ajax.processResults |
valueField / labelField /
searchField
|
无限滚动 (pagination.more) |
plugins: ["virtual_scroll"] + setNextUrl()
|
templateResult / templateSelection |
render: { option, item } |
dropdownParent: $("#modal") |
无需——下拉菜单以内联方式显示 |
$("#x").val("2").trigger("change") |
ts.setValue("2") |
$("#x").val() |
ts.getValue() |
.on("select2:select", fn) |
ts.on("item_add", fn) |
.on("change", fn) |
ts.on("change", fn) |
$("#x").select2("open") |
ts.open() |
$("#x").prop("disabled", true) |
ts.disable() |
$("#x").select2("destroy") |
ts.destroy() |
$("#x").empty().select2({ data }) |
ts.clearOptions(); ts.addOptions(data) |