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

Question

我使用jquery-select2-4搜索外部数据库，并向用户提供他可以选择的搜索结果。

我在这弹琴上运行了一个工作版本。

但是，例如，如果只返回一个搜索结果，我希望跳过整个选择过程，只需将返回的搜索结果添加到所选选项的列表中即可。根据select2文档，我可以添加如下新选项：

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

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

• 添加选项后，我无法清除搜索字段。
• 我不能添加任何其他的id和text。
• 添加的选项以undefined的形式显示给用户。

我知道这个问题包含三个方面，但这三个方面可能都是指这一个问题：

如何以编程方式添加新的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", "123", true, 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();
});

Answer 1

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

1.模拟唯一剩余项目的选择

正如您所指出的，创建option元素有其局限性:您只能指定id和text属性，因此不可能访问所选项的其他属性。

此外，它还生成未定义的值。这是因为回调函数formatRepoSelection试图访问为option元素创建的对象未定义的属性(名称和叉)。在这种情况下，您可以尝试使用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是未定义的，在select2.min.js:2:9842

这是因为这一声明：

return select2_element.trigger('change');

这将返回jQuery select2_element对象，但是库希望返回值具有一个结果属性。

由于不再需要该触发器，因此可以通过将上面的内容替换为：

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

不要试图设置results: []，因为我们仍然需要项目来模拟鼠标事件。

还有..。仅此而已。

下面是工作解决方案：JS小提琴。