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

Posted 2023-05-07

【中文标题】以编程方式添加新的 jquery-select2-4 选项并重置搜索字段？

【英文标题】：Programmatically add new jquery-select2-4 option and reset the search field?

【发布时间】：2016-05-08 20:21:32

【问题描述】：

我正在使用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 和text，我无法添加任何其他内容。 添加的选项显示给用户undefined。

我意识到这个问题包含 3 个方面，但所有 3 个方面可能都涉及到这 1 个问题：

如何

供您参考，这是我要询问的代码的上下文：

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

【问题讨论】：

看不到你用来初始化Select2的JS，问题2和3答不上来。

它在 jsfiddl 中。如果您愿意，我可以将其添加到问题中，但我将其省略了，因为它遵循标准设置，并且我不想用标准代码来拥挤问题。

我现在已经放入了代码上下​​文。

【参考方案1】：

我对原代码做了两处改动：

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

正如您所指出的，option 元素的创建有其局限性：您只能指定 id 和 text 属性，无法访问所选项目的其他属性。

此外，它还会生成 undefined 值。这是因为回调函数 formatRepoSelection 试图访问为 option 元素创建的对象未定义的属性（name 和 forks） .在这种情况下，您可以尝试解决此问题并使用 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 对象，但库希望返回值具有 results 属性。

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

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

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

而且……仅此而已。

这是有效的解决方案：JS fiddle。