在select2中使用AJAX标记


74

我正在做标记 select2

我对select2有这些要求:

  1. 我需要使用select2 ajax搜索一些标签
  2. 另外我还需要在select2中使用“标签”,以允许列表(Ajax结果)中未包含的值。

两种方案均独立工作。但是仅将aJax值连接在一起。如果我们键入列表中未包含的其他任何值,则显示“未找到匹配项”

我的方案如果用户键入列表中没有的任何新值,请允许他们组成自己的标签。

有什么办法可以使这项工作吗?


您应该接受克里斯的回答。
Marco Kerwitz

Answers:


98

Select2具有功能“ createSearchChoice”:

根据用户的搜索词创建一个新的可选选项。允许创建查询功能不可用的选项。当用户可以动态创建选择(例如用于“标记”用例)时很有用。

您可以使用以下方法实现所需的功能:

createSearchChoice:function(term, data) {
  if ($(data).filter(function() {
    return this.text.localeCompare(term)===0;
  }).length===0) {
    return {id:term, text:term};
  }
},
multiple: true

这是一个更完整的答案,它将JSON结果返回给ajax搜索,并允许从该术语创建标签(如果该术语未返回结果):

$(".select2").select2({
  tags: true,
  tokenSeparators: [",", " "],
  createSearchChoice: function(term, data) {
    if ($(data).filter(function() {
      return this.text.localeCompare(term) === 0;
    }).length === 0) {
      return {
        id: term,
        text: term
      };
    }
  },
  multiple: true,
  ajax: {
    url: '/path/to/results.json',
    dataType: "json",
    data: function(term, page) {
      return {
        q: term
      };
    },
    results: function(data, page) {
      return {
        results: data
      };
    }
  }
});

5
对于那些在使用此代码段时遇到困难的人:$(data).filter函数是进行匹配的地方,并且this.text仅仅text是返回的JSON中键的值。例如,如果要返回联系人列表,则需要选中this.name。另外,如果您要在远程文件(/path/to/results.json)中进行某种术语匹配,则只需确保要返回的项具有所需的属性,并且在返回后不会被未定义或格式错误远程文件。(Ph,好答案。
谢谢克里斯

1
能否请您看一下这个问题。stackoverflow.com/questions/35231584/…–
Rocx

37

选择v4

http://jsfiddle.net/8qL47c1x/2/

HTML:

<select multiple="multiple" class="form-control" id="tags" style="width: 400px;">
    <option value="tag1">tag1</option>
    <option value="tag2">tag2</option>
</select>

JavaScript:

$('#tags').select2({
    tags: true,
    tokenSeparators: [','],
    ajax: {
        url: 'https://api.myjson.com/bins/444cr',
        dataType: 'json',
        processResults: function(data) {
          return {
            results: data
          }
        }
    },

    // Some nice improvements:

    // max tags is 3
    maximumSelectionLength: 3,

    // add "(new tag)" for new tags
    createTag: function (params) {
      var term = $.trim(params.term);

      if (term === '') {
        return null;
      }

      return {
        id: term,
        text: term + ' (new tag)'
      };
    },
});

选择v3.5.2

具有一些改进的示例:

http://jsfiddle.net/X6V2s/66/

的HTML:

<input type="hidden" id="tags" value="tag1,tag2" style="width: 400px;">

js:

$('#tags').select2({
    tags: true,
    tokenSeparators: [','],
    createSearchChoice: function (term) {
        return {
            id: $.trim(term),
            text: $.trim(term) + ' (new tag)'
        };
    },
    ajax: {
        url: 'https://api.myjson.com/bins/444cr',
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term
            };
        },
        results: function(data, page) {
            return {
                results: data
            };
        }
    },

    // Take default tags from the input value
    initSelection: function (element, callback) {
        var data = [];

        function splitVal(string, separator) {
            var val, i, l;
            if (string === null || string.length < 1) return [];
            val = string.split(separator);
            for (i = 0, l = val.length; i < l; i = i + 1) val[i] = $.trim(val[i]);
            return val;
        }

        $(splitVal(element.val(), ",")).each(function () {
            data.push({
                id: this,
                text: this
            });
        });

        callback(data);
    },

    // Some nice improvements:

    // max tags is 3
    maximumSelectionSize: 3,

    // override message for max tags
    formatSelectionTooBig: function (limit) {
        return "Max tags is only " + limit;
    }
});

JSON:

[
  {
    "id": "tag1",
    "text": "tag1"
  },
  {
    "id": "tag2",
    "text": "tag2"
  },
  {
    "id": "tag3",
    "text": "tag3"
  },
  {
    "id": "tag4",
    "text": "tag4"
  }
]

2015年1月22日更新:

修复jsfiddle:http//jsfiddle.net/X6V2s/66/

2015-09-09更新:

使用Select2 v4.0.0 +,它变得更加容易。

选择v4.0.0

https://jsfiddle.net/59Lbxvyc/

HTML:

<select class="tags-select" multiple="multiple" style="width: 300px;">
  <option value="tag1" selected="selected">tag1</option>
  <option value="tag2" selected="selected">tag2</option>
</select>

JS:

$(".tags-select").select2({
  // enable tagging
  tags: true,

  // loading remote data
  // see https://select2.github.io/options.html#ajax
  ajax: {
    url: "https://api.myjson.com/bins/444cr",
    processResults: function (data, page) {
      return {
        results: data
      };
    }
  }
});

非常好的示范:) @faost
斯里兰卡,

谢谢-拯救生命!和时间:P
路易斯·洛佩斯

@faost您能看看这个吗。如果可能的话stackoverflow.com/questions/35216302/…–
Rocx

3
@faost:在您的演示自动选择2 V4.0.0完成不工作,而不是过滤器/查找单词
ಠ_ಠ

1
@ಠ_ಠselect2发送搜索项作为查询参数,在我的示例中,请求如下所示:GET https://api.myjson.com/bins/444cr?q=TEST。但是api.myjson.com/bins/444cr是静态网址,无法处理查询参数。在实际应用中,您的后端将使用此查询参数“ q”来过滤结果。
亚历山大·费多罗夫

5
createSearchChoice : function (term) { return {id: term, text: term}; }

只需添加此选项


4
您不应该这样做,因为如果您已有标签,那么用户将有两个选择相同标签的选择,例如“ test”(来自数据库)和“ test”(新创建)。您应该检查术语是否已经在数据中。
marxin 2014年

0

您可以通过使ajax函数也返回搜索项作为结果列表中的第一个结果来完成此工作。然后,用户可以选择该结果作为标签。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.