堆叠：

• Ruby-2.7.6
• 轨道-6.1.5
• 制表机-5.4.3
• jquery-铁路宝石-4.4.0
• jquery-用户界面-铁路gem-6.0.1
• 选择2个导轨gem-3.5.11

为了使我们定制的和已经建立的select2字段能够用于数据过滤，我尝试使用select2作为定制的headerFilter（如本示例/answer https://stackoverflow.com/a/53622648所示），select字段及其选项确实会出现，但是当选择一个项目时什么也不会发生，也不会触发任何select2事件。

• • 预期：**用select2库替换默认的内置列表编辑器，并将其用作headerFilter。
• • 尝试：**从后端获取select字段所需的项，将这些项提供给select2构建器，然后将整个select2字段插入headerFilter
• • 结果：**Select2搜索字段确实出现并按预期工作（字段可见，选项可见），直到选择了任何项目。选择后，没有任何React，也没有触发任何select2事件，因此无法使用select2应用headerFiltering。此外，通过单击所选的select2项目，我确实在控制台中收到警告：

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
色谱柱说明：

{
  title: 'Items',
  field: 'item_name',
  headerFilter: selectEditor,
  headerSort: false
},

var selectEditor = function(cell, onRendered, success, cancel, editorParams){

  //create input element to hold select2
  var container = document.createElement("span");
  var editor = document.createElement("input");
  container.append(editor);

  onRendered(function(){
    $(editor).select2({
      data: [{text: 'hi', value: '1'}],
      multiple: false,
      width: '100%',
      allowClear: true
    });

    $(editor).on('change', function (e) {
      console.log($(editor).val());
      success($(editor).val());
    });

    $(editor).on('change.select2', function (e) {
      console.log($(editor).val());
      success($(editor).val());
    });

    $(editor).on('select2:select', function (e) {
      console.log($(editor).val());
      success($(editor).val());
    });

    $(editor).on('blur', function (e) {
      console.log('blurred');
      cancel();
    });

    $(editor).on('click', function (e) {
      console.log('clicked');
      cancel();
    });
    container.focus();
  });
  return container;
}