Jquery Chosen 插件 - 通过 Ajax 动态填充列表

Ajax

使用Jquery Chosen插件通过Ajax动态填充列表是一种非常方便的方法，它可以帮助我们实现在输入框中输入内容时自动从服务器获取相关选项，并以列表形式展示出来。这对于提升用户体验和减少用户输入错误非常有帮助。下面我们来看一下如何使用这个功能，并通过一个具体的案例来说明。

首先，我们需要在页面中引入Jquery和Chosen插件的相关文件。可以通过CDN或本地引用的方式进行引入。接着，我们需要一个输入框，用于用户输入内容。在输入框的上方，我们可以添加一个标题，例如“选择国家”。这个标题可以使用

标签来定义，同时使用标签来为标题添加加粗效果。

接下来，我们需要一个用于展示选项的列表。这个列表可以使用标签来定义，并且需要添加一个唯一的id属性，以便在后续的JavaScript代码中进行操作。在选择列表的上方，我们可以添加一个小标题，例如“可选国家”。这个小标题可以使用

标签来定义，并使用标签来加粗显示。

在页面加载完成后，我们可以使用JavaScript代码来初始化Chosen插件，并为输入框绑定一个事件监听器，当用户输入内容时，触发Ajax请求。请求的URL可以指向服务器上的一个接口，用于获取与输入内容相关的选项。服务器返回的数据可以是JSON格式的数组，每个选项包含一个value和text属性，分别代表选项的值和显示文本。

在事件监听器中，我们可以使用Jquery的Ajax函数来发送请求，并在成功回调函数中处理返回的数据。我们可以先清空选择列表中的内容，然后遍历返回的数据，为选择列表添加新的选项。遍历过程中，可以使用Jquery的append函数来动态生成标签，并为每个选项设置value和text属性。

最后，我们需要调用Chosen插件的update方法，来更新选择列表的显示。这样，当用户输入内容时，选择列表会自动更新并展示相关选项。用户可以通过点击选项或使用键盘上下键来进行选择。

下面是一个具体的案例代码，用于展示如何使用Jquery Chosen插件通过Ajax动态填充列表：

html
<!DOCTYPE html>
<html>
<head>
  <Meta charset="UTF-8">
  <title>使用Jquery Chosen插件通过Ajax动态填充列表</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdnJS.cloudflare.com/Ajax/libs/chosen/1.8.7/chosen.min.CSS">
</head>
<body>
  <h2><strong>选择国家</strong></h2>
  <input type="text" id="country-input">
  <h3><strong>可选国家</strong></h3>
  <select id="country-list" class="chosen-select" multiple></select>
  <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/chosen/1.8.7/chosen.jquery.min.JS"></script>
  <script>
    $(document).ready(function(){
      $("#country-input").on("input", function(){
        var keyword = $(this).val();
        $.Ajax({
          url: "get_countries.php",
          data: { keyword: keyword },
          success: function(data){
            $("#country-list").empty();
            $.each(data, function(index, item){
              $("#country-list").append('<option value="' + item.value + '">' + item.text + '</option>');
            });
            $("#country-list").trigger("chosen:updated");
          }
        });
      });
      $(".chosen-select").chosen();
    });
  </script>
</body>
</html>

在上面的案例代码中，我们使用了一个名为get_countries.php的服务器接口来获取与输入内容相关的选项。这个接口接收一个名为keyword的参数，用于匹配选项的文本。服务器返回的数据格式如下所示：

JSon
[
  { "value": "China", "text": "中国" },
  { "value": "United States", "text": "美国" },
  { "value": "Japan", "text": "日本" },
  { "value": "Germany", "text": "德国" },
  { "value": "United Kingdom", "text": "英国" }
]

通过以上代码，我们可以实现一个简单的通过Ajax动态填充列表的功能。用户在输入框中输入内容时，选择列表会自动更新并展示与输入内容相关的选项。这大大提升了用户体验，并且减少了用户输入错误的可能性。使用Jquery Chosen插件通过Ajax动态填充列表可以应用于各种场景，例如选择城市、选择产品等。

举报有用（4）分享收藏