Select2是一个非常流行的 jQuery 插件，用于增强 HTML <select> 元素的功能。它提供了搜索、多选、标记等高级的选择器功能，而且还可以自定义渲染样式。
然而，有时候我们可能需要在 Select2 中使用自定义的输入框作为选项框，例如使用带有自动完成和过滤功能的 <input> 元素来替代默认的下拉框。本文将介绍如何通过简单的配置和一些 JavaScript 代码来实现这个需求。
步骤一：引入必要的文件
首先，我们需要从 Select2 的官方网站 https://select2.org 下载最新版本的 Select2 插件，并将其引入到 HTML 文档中：
<link rel="stylesheet" href="path/to/select2.min.css"> <script src="path/to/jquery.min.js"></script> <script src="path/to/select2.min.js"></script>
注意，Select2 是基于 jQuery 的插件，因此必须先引入 jQuery 库。
步骤二：创建 HTML 结构
接下来，我们需要创建一个 <input> 元素和一个隐藏的 <select> 元素，用于存储选中的值和显示 Select2 的下拉列表：
<input type="text" id="my-input" /> <select id="my-select" multiple style="display:none;"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select>
注意，<select> 元素必须设置为 multiple 属性，以支持多选功能。
步骤三：初始化 Select2
现在，我们可以使用 JavaScript 代码来初始化 Select2 插件，并将 <input> 元素与 <select> 元素关联起来：
-- -------------------- ---- -------
---------------------------- -
------------------------
------------ ----- -----------
----------- -----
----- -
---- -------------------------
--------- ------
-
---
-- ----------- ------ ---
--------------------------- ---------- -
--- -------------- - --------------
------------------------------------------------------
---
---这段代码使用了 ajax 配置项来从一个 JSON 文件中加载数据，你可以根据自己的需求修改它。另外，我们还监听了 <input> 元素的 change 事件，以将选择的值同步到 <select> 元素中。
至此，一个带有自定义输入框的 Select2 组件就完成了。完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ---- ------ -------------
----- ---------------- -------------------------------
------- -------------------------------------
------- --------------------------------------
-------
------
------ ----------- ------------- --
------- -------------- -------- ----------------------
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
---------
------- -----------------------
---------------------------- -
------------------------
------------ ----- -----------
----------- -----
----- -
---- -------------------------
--------- ------
-
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------