Select2通过JSON文件加载数据后搜索过滤功能失效问题

问题原因 #

• Select2 内置 ajax 配置默认使用服务端搜索逻辑：用户输入搜索词时，组件会自动携带搜索参数请求后端接口，由后端返回过滤后的匹配结果。你当前使用的接口未处理Select2的搜索参数，始终返回全量分类数据，因此看不到搜索过滤效果。
• 静态<option>标签/使用data参数传数据的场景为前端本地渲染，Select2默认开启前端本地搜索，因此搜索功能可正常运行。

修复方案 #

无需修改原有HTML代码，仅调整JS逻辑：先请求全量JSON数据，映射为Select2要求的格式后，通过data参数传给组件，即可实现和静态option场景一致的本地搜索效果。
修复后的JS代码如下：

// 先拉取全量分类数据，再初始化Select2组件
$.getJSON("https://api.jsonbin.io/b/614ef51eaa02be1d444e64fd", function (res) {
  // 映射接口返回字段为Select2默认识别的id、text格式
  const categoryOptions = res.map(item => ({
    id: item.id,
    text: item.category
  }))
  // 初始化Select2，使用本地数据，自动开启前端搜索
  $('#allowedCategories').select2({
    placeholder: 'Select allowed categories',
    selectOnClose: false,
    tags: false,
    tokenSeparators: [',', ' '],
    data: categoryOptions
  })
})

内容的提问来源于stack exchange，提问作者Melisa