以编程方式添加新的jquery-select2-4选项并重新设置搜索字段？

我正在使用 jquery-select2-4搜索外部数据库,并向用户显示他可以选择的搜索结果.

我有一个运行在this jsfiddle的工作版本.

但是,例如,如果仅返回1个搜索结果,我想跳过整个选择过程,并将返回的搜索结果添加到所选选项的列表中.根据select2 docs我可以添加一个这样的新选项：

option = new Option("Sample text","123",true,true);
select2_element.append(option);
select2_element.trigger('change');

这似乎在某种程度上起作用.但有一些问题.

>添加选项后,我无法清除搜索字段.
>我不能添加任何其他id和文本.
>添加的选项将显示给用户未定义.

我意识到这个问题包含3个方面,但是所有3个方面都可能回溯到这个1个问题：

如何以编程方式添加新的jquery-select2-4选项并重置搜索字段？

为了您的参考,这是我问的代码的上下文：

var formatRepo,formatRepoSelection,selectRepos;

formatRepoSelection = function(element) {
  return element.name + ' ' + element.forks + ' ' + element.id;
};

formatRepo = function(element) {
  var markup;
  if (!element.loading) {
    return markup = element.name + ' ' + element.id;
  }
};

selectRepos = function() {
  var option,select2_element;
  select2_element = $('#select2_element');
  select2_element.select2({
    ajax: {
      url: "https://api.github.com/search/repositories",dataType: 'json',data: function (params) {
        return {
          q: params.term,page: params.page
        };
      },processResults: function (data,params) {

        if (data.items.length === 1) {
          // START: The code I am asking about.
          // Add the search result directly as an option.
          option = new Option("Sample text",true);
          select2_element.append(option);
          return select2_element.trigger('change');
          // END: The code I am asking about.
        } else {
          params.page = params.page || 1;

          return {
            results: data.items,pagination: {
              more: (params.page * 30) < data.total_count
            }
          };
        }
      },cache: true
    },escapeMarkup: function(markup) {
      return markup;
    },templateResult: formatRepo,templateSelection: formatRepoSelection
  });
};

$(function() {
  return selectRepos();
});

解决方法

我对原始代码做了两个修改：

1.模拟唯一剩余物品的选择

如您所说,创建一个选项元素有其局限性：您只能指定id和text属性,不需要访问所选项的其他属性.

此外,它会生成未定义的值.这是因为回调函数formatRepoSelection尝试访问为该选项元素创建的对象未定义的属性(名称和叉).您可以尝试解决这个问题,并在这种情况下使用text属性,但是您仍然无法解决上述限制.

我在这里提出的解决方案有不同的做法.而不是直接创建标签,您可以模拟用户对最后一个项目的选择,将mouseup事件发送到该列表项.

这具有如同用户点击了该项目一样应用正常选择行为的直接优点,因此可立即解决所有三个问题：

>自动清除过滤器文本;
> formatRepoSelection函数接收通常的对象,因此标签的标签符合预期;
>与任何项目相同的属性可用于您.

这是代码实现：

if (data.items.length === 1) {
      // Change 1:
      // Allow the list to update
      setTimeout(function() {
          // ... and then send a click event to the first list item
          // Note the used id has the SELECT id in the middle.
          $("#select2-select2_element-results li:first-child").trigger('mouseup');
      },0);

这个解决方案的缺点是你让自己依赖实现方面;未来版本的select2可能会根据HTML元素和属性组织结果不同.

但是,当您决定使用更新版本的select2时,更新代码不应该是一件大事.

2.返回正确的对象

您的代码在select2库中产生错误：

TypeError: b is undefined,at select2.min.js:2:9842

这是因为这个说法：

return select2_element.trigger('change');

这返回jQuery select2_element对象,但是库期望返回值具有结果属性.

由于触发器不再需要,因此可以通过以下方法来替换：

// Change 2:
  // Return empty results array
  return {
    results: data.items
  };

不要试图设置结果：[],因为我们仍然需要该项目来模拟鼠标事件.

那就是这一切.

这里是工作的解决方案：JS fiddle.