Question

我需要使用Select2 3.4.5v构建一个选择输入，满足以下要求：

多选能力
能够键入和选择不在列表中的选项。
在用户键入时加载数据列表（取决于用户查询）（如果查询为超过n个字符）
输入的最终值是所选项目与分隔符，例如“ |”，
无法迁移到新版本的Select2插件用于项目

我需要类似“标签建议”示例的内容：

<input type="hidden" id="e12" style="width:300px" value="brown, red, green"/>   

$("#e12").select2({tags:["red", "green", "blue"]});

但是具有远程数据加载功能。我希望在输入更改时触发加载数据。（甚至是附加的输入）

<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen1" style="width: 10px;">

但没有任何触发条件（除了对我的情况没有用的更改）。

有人可以帮我弄清楚吗？

Answer 1

类似的事情应该可以解决（这使用的是Select2的最新版本）。它支持多选，以及在用户键入时进行搜索。在此示例中，它搜索GitHub存储库。

我还建议使用checking out their documentation，因为它对于帮助我理解这一点非常有用。

CodePen mirror

$(document).ready(function() {
  $(".js-example-data-ajax").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
    },
    placeholder: 'Search Github for a repository',
    minimumInputLength: 1,
    multiple: true,
    templateResult: function(repo) {
      return repo.full_name;
    },
    templateSelection: function(repo) {
      return repo.full_name || repo.text;
    }
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400|Muli:300,400|Inconsolata" rel="stylesheet">
<link href="https://select2.org/assets/7c647dd1b60ff2b17a493d7f00a18e26.css" rel="stylesheet" />

<select class="js-example-data-ajax form-control" style="width: 300px;"></select>

如何在键入时从远程服务器动态加载并显示给用户

1 个答案: