使用带有无限数据和过滤器的 SELECT2 4.0.0

Posted 2023-05-07

【中文标题】使用带有无限数据和过滤器的 SELECT2 4.0.0

【英文标题】：Using SELECT2 4.0.0 with infinite Data and filter

【发布时间】：2015-05-11 14:09:30

【问题描述】：

我使用 Select2 已经 2 年了，我真的很喜欢所有的开发人员。不过 3.5.x 版本有他的限制，所以我要换到 4.0 版本，这让我很头疼！

为了您的记录，我正在使用带有大表（> 10.000 个条目）的 Select2，因此 AJAX 和无限数据（页面设置为 50 个项目）。

使用 3.5.2 版本，我可以在搜索数据时重现下划线匹配（使用 formatSelection 和 query.term）。知道如何使用 4.0.0 版制作它（函数 templateResult 只通过 result 而不是 query 吗？

在 3.x 版中，您可以使用不在列表中的搜索值添加免费条目（使用 createSearchChoice）。 4.0版没有这个选项，知道怎么重新做吗？

我尝试用输入栏替换选择栏（仍然使用选择下拉菜单）。似乎可以强制适配器，但我无法找到方法。

我需要添加一行（在第 1 行）或一个按钮（浮动到右侧）以添加新项目（类似于 createTag，但用于项目）。有人已经做到了吗？

【参考方案1】：

从 Select2 3.5.2 迁移到 Select2 4.0.0 时，我强烈建议阅读 the release notes 和 4.0 release announcement。

使用 3.5.2 版，我可以在搜索数据时重现下划线匹配（使用 formatSelection 和 query.term）.. 知道如何使用 v4.0.0 进行匹配（函数 templateResult 只传递“结果”而不是“不再查询？

这在 4.0 中已被删除，因为结果已与查询分开，因此继续传递信息没有意义。当然，这并不意味着您不能获取并存储查询。您需要做的就是存储查询，如下所示可能会起作用

var query = ;
var $element = $('#my-happy-select');

function markMatch (text, term) 
  // Find where the match is
  var match = text.toUpperCase().indexOf(term.toUpperCase());

  var $result = $('<span></span>');

  // If there is no match, move on
  if (match < 0) 
    return $result.text(text);
  

  // Put in whatever text is before the match
  $result.text(text.substring(0, match));

  // Mark the match
  var $match = $('<span class="select2-rendered__match"></span>');
  $match.text(text.substring(match, match + term.length));

  // Append the matching text
  $result.append($match);

  // Put in whatever is after the match
  $result.append(text.substring(match + term.length));

  return $result;


$element.select2(
  templateResult: function (item) 
    // No need to template the searching text
    if (item.loading) 
      return item.text;
    

    var term = query.term || '';
    var $result = markMatch(item.text, term);

    return $result;
  ,
  language: 
    searching: function (params) 
      // Intercept the query as it is happening
      query = params;

      // Change this to be appropriate for your application
      return 'Searching…';
    
  
);

在 3.x 版本中，您可以使用列表中没有的搜索值添加免费条目（使用 createSearchChoice）。 V4.0没有这个选项，不知道怎么重新做？

这仍然可以在 4.0 中使用 tags 选项（将其设置为 true）来完成。如果要自定义标签，可以使用createTag（类似createSearchChoice）。

var $element = $('#my-happy-select');

$element.select2(
  createTag: function (query) 
    return 
      id: query.term,
      text: query.term,
      tag: true
    
  ,
  tags: true
);

【讨论】：

感谢 Kevin，感谢您在回答问题和编码的同时付出的努力（和时间）。但是，对于问题 #2，我不想添加免费的“标签”，而是添加免费条目作为下拉列表。有什么帮助吗？谢谢。

免费标签和免费条目有什么区别？ createTag 与旧的 createSearchChoice 相同。

谢谢凯文。下划线解决方案正是我所需要的。

天哪。我很难找到这个。并理解这种分离，但开箱即用应该是强制性的：|

【参考方案2】：

使用 select2 4.x 为匹配结果下划线的简单方法

$element.select2(

    escapeMarkup: function (markup)  return markup; 
    ,
     templateResult: function (result) 
        return result.htmlmatch ? result.htmlmatch : result.text;
     
    ,
    matcher:function(params, data) 
        if ($.trim(params.term) === '') 
          return data;
        
        if (typeof data.text === 'undefined') 
          return null;
        

        var idx = data.text.toLowerCase().indexOf(params.term.toLowerCase());
        if (idx > -1) 
          var modifiedData = $.extend(
              'htmlmatch': data.text.replace(new RegExp( "(" + params.term + ")","gi") ,"<u>$1</u>")
          , data, true);

          return modifiedData;
        

        return null;
    
)