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

时间:2016-01-31 10:11:36

标签: jquery jquery-select2 jquery-select2-4 select2

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

我在this jsfiddle上运行了一个正在运行的版本。

但是,例如,如果只返回1个搜索结果,我想跳过整个选择过程,只需将返回的搜索结果添加到所选选项列表中。根据{{​​3}},我可以添加一个像这样的新选项:

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

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

  • 添加选项后,我无法清除搜索字段。
  • 我无法添加idtext的任何其他内容。
  • 添加的选项以undefined显示给用户。

我意识到这个问题包含3个方面,但所有3个方面可能都会回到这个问题:

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

1 个答案:

答案 0 :(得分:1)

我对原始代码进行了两处更改:

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

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

此外,它还会生成 undefined 值。这是因为回调函数 formatRepoSelection 尝试访问为{{1}创建的对象未定义的属性(名称 forks )元素。在这种情况下,您可能已经尝试解决此问题并使用 text 属性,但您仍然无法解决上述限制。

我建议的解决方案有不同的方法。您可以模拟用户对最后一项的选择,而不是直接创建标记,将 mouseup 事件发送到该列表项。

这具有直接的优势,即应用正常选择行为就像用户点击了该项一样,因此它立即解决了您遇到的所有三个问题:

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

以下是实现此目的的代码:

option

此解决方案的缺点是您自己依赖于实现方面;未来版本的 select2 可能会在HTML元素和属性方面对结果进行不同的组织。

但是,当您决定使用较新版本的 select2 时,更新代码应该不是什么大问题。

2。返回正确的对象

您的代码在 select2 库中生成错误:

  

TypeError:b未定义,位于select2.min.js:2:9842

这是因为这句话:

    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);

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

由于不再需要触发器,可以通过将以上内容替换为:

来解决此问题。
return select2_element.trigger('change');

不要试图设置 // Change 2: // Return empty results array return { results: data.items }; ,因为我们仍然需要项目来模拟鼠标事件。

而且......就是这样。

以下是工作解决方案:JS fiddle