Fastselect 是一个可定制的 JavaScript 库，用于快速创建搜索选择框。它很容易集成到现有的前端项目中，并且提供了许多配置选项和主题来满足不同的需求。
安装
你可以使用 npm 进行安装：
npm install fastselect --save
或者在 HTML 文件中引入 Fastselect 的 CDN 版本：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fastselect/dist/fastselect.min.css"> <script src="https://cdn.jsdelivr.net/npm/fastselect/dist/fastselect.standalone.min.js"></script>
快速开始
要使用 Fastselect，首先需要为你的输入框添加一个 ID。
<input type="text" id="my-select-box">
然后在 JavaScript 文件中，实例化 Fastselect 并将其绑定到输入框上：
const mySelectBox = document.getElementById('my-select-box');
new Fastselect(mySelectBox);这样就完成了一个最简单的 Fastselect 实例。默认情况下，Fastselect 会将输入框转换为一个下拉菜单，允许用户从预定义的选项列表中进行选择。
配置选项
Fastselect 提供了一系列的配置选项，使得我们可以对其外观、行为和数据源进行自定义。
以下是一些常见的配置选项：
- placeholder：输入框的占位符文本。
- searchPlaceholder：搜索框的占位符文本。
- searchMinChars：触发搜索所需的最小字符数。
- showTimeout：下拉菜单显示前的等待时间（以毫秒为单位）。
- maxItems：允许选择的最大项目数量。
- multiple：是否允许多选。
在实例化 Fastselect 时，可以将这些选项传递给其构造函数。
new Fastselect(mySelectBox, {
placeholder: '请选择',
searchPlaceholder: '搜索',
searchMinChars: 2,
showTimeout: 300,
maxItems: 3,
multiple: true
});主题
Fastselect 提供了多种主题，可以通过 CSS 类名来自定义外观。以下是一些内置的主题：
- default
- classic
- material
- bootstrap
可以通过在输入框上添加相应的类名来应用主题：
<input type="text" id="my-select-box" class="fst-default">
也可以在实例化 Fastselect 时指定主题：
new Fastselect(mySelectBox, {
theme: 'material'
});数据源
Fastselect 支持各种类型的数据源，包括静态数组、AJAX 请求和自定义回调函数。
静态数组
对于静态数组数据源，只需要将选项列表作为 JavaScript 数组传递给 Fastselect 的 options 选项即可。
-- -------------------- ---- ------- ----- ------- - - ------- ---------- ------ ------- ------- ---------- ------ ------- ------- ---------- ------ ------ -- --- ----------------------- - -------- ------- ---
AJAX 请求
Fastselect 可以通过 AJAX 请求从服务器动态加载选项列表。只需要将以下选项传递给 Fastselect 的构造函数：
- ajax：一个包含
url、dataType和delay属性的对象，用于配置 AJAX 请求。 - parseData：一个回调函数，用于将服务器响应转换为 Fastselect 可接受的格式。
-- -------------------- ---- -------
--- ----------------------- -
----- -
---- ---------------
--------- -------
------ ---
--
---------- ------------------ -
----- ------- - ---
------------------------------- -
--------------
------ --------
------ ---------
---
---
------ --------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------