在前端开发中，我们常常需要从后端获取数据来渲染页面。其中一种常见的方式是通过 Ajax 请求 JSON 数据，并将其填充到相应的 UI 控件中。这篇文章将介绍如何使用 select2 库来构建一个带有远程数据功能的下拉菜单，并通过 Ajax 请求 JSON 数据来填充数据。
准备工作
首先，我们需要准备好以下两个文件：
- jquery.min.js：jQuery 库，用于发送 Ajax 请求。
- select2.min.js：select2 库，用于呈现具有远程数据源的下拉框。
你可以在 select2 的官网上下载这些库。另外，我们还需要一个 JSON 数据源。在本教程中，我们将使用以下数据：
-- -------------------- ---- ------- - ------ -- ------- --------- ------ -- ------- ---------- ------ -- ------- ---------- ------ -- ------- --------- ------ -- ------- --------- ------ -- ------- ---------- ------ -- ------- --------- ------ -- ------- -------- ------ -- ------- ------------- ------ --- ------- ------------- -
构建 select2 下拉框
接下来，我们将使用 select2 来创建一个带有远程数据源的下拉框。我们需要在 HTML 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ---- ----------
----- -------------------------------------------------------------------------------- ---------------- --
-------
------
------- --------------------------------------
------- -----------------------------------------------------------
------- ---------------------------------------------------------------------------------------
--------
---------------------------- -
------------------------------------
----- -
---- ------------
--------- ------
-
---
---
---------
-------
-------这里，我们使用了 select2 的 ajax 属性来指定远程数据源的 URL 和数据类型。此外，我们还将 .js-example-data-ajax 类应用到 select 元素上，以便初始化 select2。
处理 JSON 数据
现在，我们已经构建了一个带有远程数据源的 select2 下拉框。但是，当用户在输入框中键入时，select2 并不会发送 Ajax 请求或显示任何数据。为了实现这一点，我们需要修改 ajax 属性，并在回调函数中处理 JSON 数据。
-- -------------------- ---- -------
---------------------------- -
------------------------------------
----- -
---- ------------
--------- -------
------ ----
--------------- -------- ------ -
------ -
-------- ----------- -------- ------ -
------ -
----- ----------
--- -------
-
--
--
--
------ ----
--
------------------- -
---
---在这个例子中，我们添加了以下几个属性：
- delay：指定输入字符后发送 Ajax 请求的延迟时间（以毫秒为单位）。
- processResults：处理从服务器返回的 JSON 数据。在这里，我们使用
$.map()函数将数据转换为 select2 所需的格式。 - cache：启用缓存以避免重复请求相同的数据。
- minimumInputLength：指定触发 Ajax 请求所需的最小输入长度。
示例代码
下面是完整示例代码：
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/13495) ，转载请注明来源 [https://www.javascriptcn.com/post/13495](https://www.javascriptcn.com/post/13495)