Select2 使用 ajax 响应数据生成 id答案

【问题标题】：Select2 generating id with ajax response dataSelect2 使用 ajax 响应数据生成 id
【发布时间】：2017-12-13 16:23:18
【问题描述】：

我的 JSON 响应数据不包含 ID 字段，这是 Select2 为显示结果所必需的。在文档中，他们提供了一种生成 id 的方法，但是，我无法这样做。有人可以提供一个如何做到这一点的例子吗？到目前为止我已经尝试过了：

  $('.itemSearch').select2(
     ajax: {
     type: "POST",
     url: '/Default.aspx/TestMethod',
     data: function(params){
       var query={
           message:params.term
       }
       return JSON.stringify(query);
     },
     processResults: function (data) {
                var data1 = $.map(data, function (obj) {
                   obj.id = obj.id || obj.ItemNumber; // replace pk with your identifier
                   return obj;
                });                         
      return {
         results: data.items,
      };
    }
   }
 });

【问题讨论】：

标签： jquery ajax jquery-select2

【解决方案1】：

这是一个正确的 sn-p，在 map 函数中使用 index 作为 Select2 的 id：

var data = [{
    "text": "Test item no. 1"
  },
  {
    "text": "Test item no. 2"
  },
  {
    "text": "Test item no. 3"
  },
  {
    "text": "Test item no. 4"
  }
];

$('.itemSearch').select2({
  ajax: {
    type: "POST",
    url: '/echo/json/',
    data: function(params) {
      var query = {
        message: params.term,
        data: data
      }
      return {
        json: JSON.stringify(query)
      }
    },
    processResults: function(data) {
      var data1 = $.map(data.data, function(obj, idx) {
        obj.id = obj.id || idx;
        return obj;
      });
      return {
        results: data1,
      };
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<select id="myselect2" class="itemSearch" data-placeholder="click to load..." style="width:200px">
</select>

这里有一个工作小提琴：https://jsfiddle.net/beaver71/7rqg3rck/

附注：

SO 上的代码 sn-p 不起作用，因为有一个 Ajax 调用。

相反，Jsfiddle 使用户能够模拟那些 Ajax 调用，但在示例中，数据被发送（通过 POST）到“/echo/json/”服务并作为相同 Ajax 请求的结果反射回来。

【讨论】：