Select2 jQuery 示例搜索

Select2 是一个 jQuery 插件，用于将常规 HTML selects 转换为更强大的下拉列表。它提供搜索，远程数据集，无限滚动，标签和许多其他高级功能。

本文将介绍如何使用 Select2 插件实现搜索功能，并提供一些示例代码。

安装Select2

要使用Select2，必须先将其添加到项目中。可以通过以下两种方式来安装Select2:

1. 直接下载Select2的压缩文件，然后将其保存到项目的本地文件夹中。
2. 使用NPM或Yarn安装Select2。

我强烈建议使用第2种方式，因为这更容易管理和更新你的依赖。

npm install select2

基本使用方法

引入Select2文件和jQuery文件里。然后在你的 HTML 中添加一个 select 元素，如下所示:

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

要将Select2功能应用于 select 元素，请在 JS 中编写以下代码:

$('.select2').select2();

现在，你的 SELECT 元素将被转换为Select2样式的下拉列表。

加载远程数据

Select2 不仅提供了从现有 SELECT 元素中加载数据的功能，还提供了从远程URL加载数据的功能。为了实现这个功能，首先要定义需要从中获取数据的URL。

var select2Data = [
  { id: 0, text: 'enhancement' },
  { id: 1, text: 'bug' },
  { id: 2, text: 'duplicate' },
  { id: 3, text: 'invalid' },
  { id: 4, text: 'wontfix' }
];

$('.select2').select2({
  ajax: {
    url: 'https://api.github.com/repos/select2/select2/issues',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  placeholder: 'Search for a repository',
  minimumInputLength: 1,
  templateResult: formatRepo,
  templateSelection: formatRepoSelection
});

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 class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>"
  );

  return $container;
}

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

上述示例的代码显示了如何加载Github API中的存储库。加载后，您可以使用Select2默认值渲染下拉列表，也可以使用模板来控制下拉列表的格式。

结论

在本文中，我们学习了如何使用Select2 jQuery插件。你现在可以使用Select2来控制你的下拉列表，甚至可以将你的下拉列表转换为远程数据集，以更好地满足你的需求。