Question

在select2“加载远程数据”中example 响应json包含的信息多于“加载数组数据”example2。

是否可以加载包含数组数据的本地json文件，如下所示并使用select2使所有键可选择/可搜索，例如， text，text2和text3？

var data = [
  {
    id: 0,
    text: 'enhancement',
    text2: 'text2',
    text3: 'text3'
  },
  {
    id: 1,
    text: 'bug',
    text2: 'text2',
    text3: 'text3'
  },
  {
    id: 2,
    text: 'duplicate',
    text2: 'text2',
    text3: 'text3'
  },
  {
    id: 3,
    text: 'invalid',
    text2: 'text2',
    text3: 'text3'
  },
  {
    id: 4,
    text: 'wontfix',
    text2: 'text2',
    text3: 'text3'
  }
];

$(".js-example-data-array").select2({
  data: data
})

<select class="js-example-data-array"></select>

Answer 1

序言：我不使用这个库。

查看3.5.3的文档。它列出了您可以编写的自定义匹配器，以根据添加到select元素的属性来匹配数据。 4.0具有可以添加到这些自定义匹配器的包装器，以使它们更新。

这些自定义匹配器可以查看对象中的任何数据。

由于当前正在重写文档的选项页面，请查看https://select2.github.io/options-old.html并搜索“匹配器”选项。不要在此处使用示例：https://select2.github.io/examples.html#matcher 因为它只向您提供输入的术语和选项的文本。

将选项传递给select2初始值设定项时，请执行以下操作：（请注意，这是未经测试的代码）。

 $(".js-example-data-array").select2({
      data: data,
    matcher: function (params, data) {
      // If there are no search terms, return all of the data
      if ($.trim(params.term) === '') {
        return data;
      }

      // `params.term` should be the term that is used for searching
      // `data.text` is the text that is displayed for the data object

      // here include conditions for each of the attributes you want to match on
      // I've included text and text2 as an example
      if (data.text.indexOf(params.term) > -1 || data.text2.indexOf(params.term) > 1) {
        return data;
      }

      // Return `null` if the term should not be displayed
      return null;
    }
})

祝你好运。

Select2使用多个键加载本地json

1 个答案: