Question

我正在开发一款使用Select2插件的应用。我需要允许用户在框中键入以显示选项供他们选择。我有那个工作。但是，我还想让用户能够在列表中输入新选项。我不知道该怎么做。目前，我的Select2初始化如下所示：

$('#myField').select2({
  allowClear: true,
  placeholder: 'Please select',
  minimumInputLength: 3,
  initSelection: function (element, callback) {
    var id = $(element).val();
    if (id) {
      callback({ ItemId: id, ItemText: selectedName });
    }
  },
  ajax: {
    url: '/api/suggestions',
    dataType: 'json',
    quietMillis: 150,
    data: function (term, page) {
      return {
        q: term,
        count: 3
      }
    },
    results: function (data, page) {
      return { results: data, id: 'ItemId', text: 'ItemText' };
    }
  },
  id: function (item) { return item.ItemId; },
  text: function (item) { return item.ItemText; },
  formatResult: function (i) { return i.ItemText },
  formatSelection: function (i) { return i.ItemText }
});

Answer 1

目前您正在通过Select2上的ajax选项加载数据，如果您在Select2初始化之前预加载数据，那么解决问题的方法是：

var data = $.get('/api/suggestions');

然后使用您之前创建的数据变量初始化Select2。

做一些实现，用户会以某种方式添加数据，并将它们附加到data变量：

data.push({ id : 'newID' , text : 'newText'});

现在您获得了新数据，所以只需重新加载Selet2：

$('#myField').select2('data', data);

编辑：

如果没有预加载数据，您可以执行以下操作：

var data = $("#myField").select2('data'); //Read all data from select2
data.push({id:5,text:"new item"}); //Add new item to data array
$("#myField").select2("data", data, true); //Update select2 data

Answer 2

您正在寻找createSearchChoice选项。

来自documentation：

根据用户的搜索字词创建新的可选择选项。允许创建通过查询功能不可用的选项。用户可以动态创建选项，例如用于标记＆＃39;用例。

在此函数中，您可以选择检查用户是否未键入现有元素，然后使用custom标记标记此新项目，以便稍后在更改的事件中创建项目：

createSearchChoice: function (term, data) {
    //optionally check that the item is not already in the list
    if ($(data).filter(function () {
        return this.ItemText.localeCompare(term) === 0;
    }).length === 0) {
        return {
            ItemId: term,
            ItemText: term,
            custom: true // mark the item
        };
    }
}

然后在"change"事件中，您可以在custom标志出现时处理新元素的保存

.on("change", function (evt) {
    if (evt.added) {
        console.log(evt.added)
        if (evt.added.custom) {
            //save to server, etc.
        }
    });

演示JSFiddle。

将文本输入select2列表

2 个答案: