📌  相关文章
📜  select2 文档 (1)

📅  最后修改于: 2023-12-03 15:34:54.386000             🧑  作者: Mango

Select2文档介绍

简介

Select2是一个基于jQuery的选择框插件，它提供了一种优雅的方式来增强常规的HTML

Select2支持多选，搜索，远程数据加载和无限滚动等功能。

安装

可以使用npm或者Yarn来安装Select2，也可以直接使用CDN引入。

示例代码：

<!-- 引入Select2 css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入Select2 js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
使用
基本用法

Select2最基本的用法就是将一个HTML

<select class="basic-select2">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<script>
$(document).ready(function() {
  $('.basic-select2').select2();
});
</script>
多选

Select2还支持多选功能。将multiple属性添加到

<select class="multi-select2" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<script>
$(document).ready(function() {
  $('.multi-select2').select2();
});
</script>
远程数据加载

Select2还支持从服务器加载数据。只需要通过ajax指定数据源的URL即可。

<select class="remote-select2"></select>

<script>
$(document).ready(function() {
  $('.remote-select2').select2({
    ajax: {
      url: 'https://example.com/data',
      dataType: 'json'
    }
  });
});
</script>
自定义模板

Select2允许开发者自定义下拉框的显示模板，可以灵活地展示数据。

<select class="template-select2"></select>

<script>
$(document).ready(function() {

  function formatRepo(repo) {
    if (repo.loading) return repo.text;

    var $container = $(
      "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
        "<div class='select2-result-repository__meta'>" +
          "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

    if (repo.description) {
      $container.append("<div class='select2-result-repository__description'>" + repo.description + "</div>");
    }

    $container.append("</div></div>");

    return $container;
  }

  function formatRepoSelection(repo) {
    return repo.full_name;
  }

  $('.template-select2').select2({
    ajax: {
      url: 'https://api.github.com/search/repositories',
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term,
          page: params.page
        };
      },
      processResults: function (data, params) {
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
  });

});
</script>
结语

以上是Select2的一些基本用法和示例代码，希望对开发者有所帮助。如果需要更详细的文档，可以访问Select2官网。

参考链接