Jquery 如何使用select2构建标记功能?

Jquery 如何使用select2构建标记功能?,jquery,jquery-select2,Jquery,Jquery Select2,我想使用select2构建一个用户tag函数。有了它,我们可以向用户添加标签。它实现以下功能: 键入标记时,使用ajax在数据库中搜索单词并列出匹配结果 我们可以选择结果快速添加标签 我们还可以按enter键添加数据库中不存在的新标记 提交时,我们只需提交自己的标签 但是,使用作者网站中的示例,我只能获得标记或ajax搜索。我不能把它们结合在一起 谁能给我一些建议吗 我看不出有什么问题。在github示例中,我刚刚将multiple=“multiple”属性添加到select,我有ajax+标记

我想使用
select2
构建一个用户
tag
函数。有了它,我们可以向用户添加
标签。它实现以下功能:

  • 键入标记时,使用ajax在数据库中搜索单词并列出匹配结果
  • 我们可以选择结果快速添加标签
  • 我们还可以按enter键添加数据库中不存在的新标记
  • 提交时,我们只需提交自己的标签
  • 但是,使用作者网站中的示例,我只能获得
    标记
    ajax
    搜索。我不能把它们结合在一起


    谁能给我一些建议吗

    我看不出有什么问题。在github示例中,我刚刚将
    multiple=“multiple”
    属性添加到
    select
    ,我有ajax+标记功能。 此外,我还添加了
    tags:true
    选项,允许用户创建自己的标记

    HTML:

    <select class="js-data-example-ajax" multiple="multiple">
    </select>
    
    $(".js-data-example-ajax").select2({
      tags:true,        
      ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, page) {
          var newData = [];
            $.each(data.items, function (index, item) {
                newData.push({
                    id: item.id  //id part present in data 
                  , text: item.name  //string to be displayed
                });
            });
            return { results: newData };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      minimumInputLength: 1
    });
    
    还请注意,我修改了
    processResults
    函数,以使其在JSFIDLE中工作


    下面是一个工作示例:

    我看不出有任何问题。在github示例中,我刚刚将
    multiple=“multiple”
    属性添加到
    select
    ,我有ajax+标记功能。 此外,我还添加了
    tags:true
    选项,允许用户创建自己的标记

    HTML:

    <select class="js-data-example-ajax" multiple="multiple">
    </select>
    
    $(".js-data-example-ajax").select2({
      tags:true,        
      ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, page) {
          var newData = [];
            $.each(data.items, function (index, item) {
                newData.push({
                    id: item.id  //id part present in data 
                  , text: item.name  //string to be displayed
                });
            });
            return { results: newData };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      minimumInputLength: 1
    });
    
    还请注意,我修改了
    processResults
    函数,以使其在JSFIDLE中工作

    下面是一个工作示例: