将SELECT2 4.0.0与无限数据和过滤器结合使用 [英] Using SELECT2 4.0.0 with infinite Data and filter

问题描述

两年以来，我一直在使用Select2，我非常喜欢所有开发人员.但是，版本3.5.x有其局限性，所以我要升级到版本4.0，这让我头疼！

I'm using Select2 now since 2 years and I really enjoy all dev made. however, version 3.5.x has his limit, so I'm moving to version 4.0, which give me headaches!

为便于记录，我在大型表(> 10.000个条目)中使用了Select2，因此AJAX&无限数据(页面设置为50个项目).

For your record, I'm using Select2 with large table (> 10.000 entries), so AJAX & infinite data (page set to 50 items).

1. 在3.5.2版中，我可以在搜索数据时重现下划线匹配(使用formatSelection和query.term).知道如何使用4.0.0版本(功能templateResult仅通过result而不再通过query吗?

1. With version 3.5.2, I can reproduce the underline match when searching for data (using formatSelection and query.term). Any idea how to make it with version 4.0.0 (function templateResult only passes result and not query anymore?

对于3.x版，您可以使用列表中未包含的搜索值添加免费条目(使用createSearchChoice).版本4.0没有此选项，不知道如何重新制作吗?

With version 3.x, you can add free entries using search value was not in the list (using createSearchChoice). Version 4.0 does not have this option, any idea how to make it again?

我尝试用输入栏替换选择"栏(仍然使用选择"下拉菜单).似乎有可能强制使用适配器，但我找不到方法.

I try to replace the Select bar with an input bar (still using the select dropdown). It seems possible to force the adapter but I was unable to find how.

我需要添加一行(在第1行)或一个按钮(在右侧浮动)以添加新项(类似于createTag，但对于项).有人做到了吗?

I need to add either a line (at row 1) or a button (floating to the right) to add new item (similar to createTag, but for an item). has someone made it already?

推荐答案

我强烈建议阅读发行说明和从Select2 3.5.2迁移到Select2 4.0.0时的 4.0发布公告.

I'd highly recommend reading the release notes and the 4.0 release announcement when migrating from Select2 3.5.2 to Select2 4.0.0.

在3.5.2版中，我可以在搜索数据(使用formatSelection和query.term)时重现下划线匹配.任何想法如何使用v4.0.0进行创建(函数templateResult仅传递结果"而不传递查询"了吗?

With version 3.5.2, I can reproduce the underline match when searching for data (using formatSelection and query.term).. any idea how to make it with v4.0.0 (function templateResult only pass 'result' and not 'query' anymore ?

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

This was removed in 4.0 because the results have been separated from the queries, so it didn't make sense to keep passing along the information. Of course, this doesn't mean you can't get the query and store it. All you would need to do is store the query, something like the following might work

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没有此选项，不知道如何重新制作吗?

With version 3.x, you can add free entries using search value was not in the list (using createSearchChoice). V4.0 has not this option, any idea how to make it again ?

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

This can still be done in 4.0 using the tags option (set it to true). If you want to customize the tag, you can use createTag (similar to createSearchChoice).

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

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

这篇关于将SELECT2 4.0.0与无限数据和过滤器结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！