在 select2 3.5.2 中使用 initSelection 进行自定义过滤答案

【问题标题】：Using initSelection in select2 3.5.2 for custom filtering在 select2 3.5.2 中使用 initSelection 进行自定义过滤
【发布时间】：2015-03-04 14:43:57
【问题描述】：

我有一个使用 select2 的文本字段。这是初始化：

        $("#foo").select2({
            createSearchChoice:function(term, data) { 
                if ($(data).filter(function() { 
                    return this.text.localeCompare(term)===0; 
                }).length===0) 
                {return {id:term, text:term};} 
            },
            initSelection : function (element, callback) {
                var data = {id: element.val(), text: element.val()};
                callback(data);
            },
            tags:[],
            tokenSeparators: [","], 
            data: [...data goes here...]
        });

在此字段中，用户应该输入一个数字，或从列表中选择项目。如果用户放入的项目未出现在列表中，则应将其创建为简单标签（id 和 text 相同）。这行得通。

当我以编程方式设置值时不起作用：

myvar.find('.placeholder lorem-ipsum').val(number).trigger("change");

它现在的工作方式是，当我将它设置为任何值时，它会毫无怨言地接受它，制作一个新的简单标签。但是，如果我要完全删除 initSelection 参数，它将忽略未知值，并使用从列表中获取的已知值（其中标签很复杂 - id 和文本不同）。

如果我设置给字段的值在列表中找到，我如何制作它，它将使用该项目，否则制作一个简单的标签？它现在的工作方式（仅限简单标签）在某种程度上是可以接受的，但我更希望它能够理想地工作。

编辑：我已经举例说明了它如何使用和不使用 initSelection 参数。

http://jppk.byethost12.com/with.html

http://jppk.byethost12.com/without.html

简而言之，我希望它在我推送“添加新项目”时像 with.html 一样工作，我希望它在我推送“添加现有项目”时像 without.html 一样工作。

【问题讨论】：

请在jsfiddle.net 中举例说明您要完成的工作。
@Neoaptt 我如何让 jsfiddle 使用 select2？它似乎不在库列表中。我想要的很简单，真的。在列表中查找标签？在列表中使用标签。在列表中找不到标签？做一个新的。
@Neoaptt 我已经编辑了一对示例。

标签： javascript twitter-bootstrap jquery-select2

【解决方案1】：

这是我对你想要的最好的解释。

JSFiddle

诀窍是将元素附加到选择字段。

var array = ['foo', 'bar', 'baz']
$.each(array, function(key, value) {
  appendSelect(value);
});
$("#foo").select2();
$('#submit').click(function() {
  var val = $('#name').val();
  $('#name').val('');
  array.push(val);
  appendSelect(val);
});

function appendSelect(value) {
  $('#foo').append($("<option></option>").text(value));
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/js/select2.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class='container'>
  <select id='foo' multiple="multiple" class='form-control'></select>
  <label>Input</label>
  <input id='name' />
  <button id='submit'>submit</button>
</div>

【讨论】：

我不确定这是否符合我的要求。我已经有办法将东西添加到列表中。我想要的是它在有匹配项时从列表中选择项，否则只创建一个。

【解决方案2】：

很久很久以后，我找到了一个正确的解决方案：

    initSelection : function (element, callback) {
        var eArr = element.val().split(",");
        var data = [];
        for (var i=0;i<eArr.length;i++) {
            for (var j=0;j<preExistingData.length;j++) {
                if (preExistingData[j]["id"] === eArr[i]) {
                    data.push(preExistingData[j]);
                    continue;
                }
            }
            data.push({id: eArr[i], text: eArr[i]});
        }
        callback(data);
    },

这不仅检查该值是否在预先存在的值中（在这种情况下它使用该项目），而且该值是否是一个逗号分隔的值列表（在这种情况下它正确地将它们封装为 JS对象）。

【讨论】：