简介
Slim Select 是一个轻量级的选择器库，它提供了一种简单而灵活的方式来创建自定义的选择器。它具有快速、易于使用和高度可定制的特点，非常适合用于前端开发中。
安装
使用 NPM 进行安装：
npm install slim-select
在 HTML 文件中引入 Slim Select 的 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="path/to/slimselect.min.css"> <script src="path/to/slimselect.min.js"></script>
使用
基本用法
在 HTML 中创建一个 select 元素，并添加 data-slim-select 属性，然后在 JavaScript 中实例化 slimSelect 对象：
-- -------------------- ---- -------
------- -----------------
------- ----------------------
------- ----------------------
------- ----------------------
---------
--------
--- ---- - --- ------------
------- --------------------
---
---------这样就可以将 select 元素转换为 slimSelect 实例了。
配置选项
slimSelect 提供了丰富的配置选项，以便您可以根据需要进行个性化设置。以下是一些常见的配置选项：
select: String，必填，要转换为 slimSelect 实例的 select 元素的 CSS 选择器。searchText: String，可选，搜索框的文本提示。searchPlaceholder: String，可选，搜索框的占位符。searchHighlight: Boolean，可选，是否高亮匹配的搜索结果。searchFocus: Boolean，可选，是否在打开下拉列表时自动聚焦到搜索框。allowDeselect: Boolean，可选，是否允许取消选择。ajax: Function，可选，用于从服务器获取选项数据的 ajax 方法。
以下是一个使用配置选项的示例：
-- -------------------- ---- -------
------- -----------------
------- ----------------------
------- ----------------------
------- ----------------------
---------
--------
--- ---- - --- ------------
------- ---------------------
----------- -------
------------------ ---------
---------------- -----
------------ -----
-------------- -----
----- ---------------- --------- -
-- ----- -- ---- --
-
---
---------API 方法
slimSelect 还提供了一些 API 方法，以便您在代码中对其进行操作。以下是常见的 API 方法：
setData(data): 设置选项数据。setSelected(selected): 设置选定的选项。setSearchText(text): 设置搜索框的文本。open(): 打开下拉列表。close(): 关闭下拉列表。
以下是一个使用 API 方法的示例：
-- -------------------- ---- -------
------- -----------------
------- ----------------------
------- ----------------------
------- ----------------------
---------
------- ---------------------------
------- --------------------------------
------- ------------------------------------
------- -------------------------
------- --------------------------
--------
--- ---- - --- ------------
------- --------------------
---
------------------------------------------------------------- ---------- -
--------------
- ------ ---- ----- ----- --
- ------ ---- ----- ----- --
- ------ ---- ----- ----- -
---
---
----------------------------------------------------------------- ---------- -
----------------------
---
-------------------------------------------------------------------- ---------- -
--------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------