Ruby on rails Jquery插件，用于使用multiselect（用于选择选项的复选框）和延迟加载自动完成

我需要使用multiselect选项实现自动完成功能。multiselect应包含复选框。此外，由于数据量巨大，因此应该可以进行延迟加载。 目前正在使用Select2JS，但面临与Rails的兼容性问题。 共享当前代码

请建议修改当前代码或替代插件以达到上述要求

版本：Rails 6.0.3.4、Ruby 2.7.2、Select2 4.0.7

正在使用的当前代码：

Javascript代码

$('#input_field').select2({
  placeholder: 'search',
  minimumInputLength: 3,
  width: '100%',
  multiple: true,
  query: function(q) {
    var pageSize,
      results,
      that = this;
    pageSize = 20; // or whatever pagesize
    results = [];
    if (q.term && q.term !== '') {
      results = _.filter(that.data, function(e) {
        return e.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0;
      });
    } else if (q.term === '') {
      results = that.data;
    }
    q.callback({
      results: results.slice((q.page - 1) * pageSize, q.page * pageSize),
      more: results.length >= q.page * pageSize,
    });
  },
  data: #{@data_list.to_json}
});

%input#input_field{:placeholder => "Please select one or more names here", :style => "width:100%;", :name => "keyword", :required => true}/

数据列表

@data_list = [{ "id": 1,"text": "Text 1"},{"id": 2,"text": "Text 2"},{"id": 2,"text": "Text 3"}]

查看代码

$('#input_field').select2({
  placeholder: 'search',
  minimumInputLength: 3,
  width: '100%',
  multiple: true,
  query: function(q) {
    var pageSize,
      results,
      that = this;
    pageSize = 20; // or whatever pagesize
    results = [];
    if (q.term && q.term !== '') {
      results = _.filter(that.data, function(e) {
        return e.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0;
      });
    } else if (q.term === '') {
      results = that.data;
    }
    q.callback({
      results: results.slice((q.page - 1) * pageSize, q.page * pageSize),
      more: results.length >= q.page * pageSize,
    });
  },
  data: #{@data_list.to_json}
});

%input#input_field{:placeholder => "Please select one or more names here", :style => "width:100%;", :name => "keyword", :required => true}/