Javascript select2 4.0.0无法选择包含远程数据的项目

我使用select2从RESTWeb服务加载数据块。通过滚动成功加载数据，但无法选择其中的元素数据已加载但未选择

HTML:

javaScript:

$("#test").select2({
    ajax: {
        url: "URL",
        dataType: 'json',
        delay: 250,
        data: function(params) {
            return {
                searchTerm: params.term, // search term
                page: params.page
            };
        },
        processResults: function(data, params) {
            params.page = params.page || 0;
            return {
                results: data.content,
                pagination: {
                    more: (1 + params.page) < data.totalPages
                }
            };
        },
        cache: true
    },
    allowClear: true,
    escapeMarkup: function(markup) {
        return markup;
    },
    multiple: true,
    maximumSelectionLength: 22,
    placeholder: "Select fruits...",
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

function formatRepoSelection(data) {
    return data.hostname;
}

function formatRepo(data) {
    if (data.loading) return data.text;
    var markup = "<option value='"+data.hostname+"'>" + data.hostname + "</option>"
    return markup;
}

这是一个json对象的输出数据，该对象具有一个属性内容，该属性的值为主机名列表

---

从服务器返回的数据格式不适合select2使用：select2希望每个值都是一对id/文本，因此在processResults中，您需要格式化结果，还需要修改两个渲染函数，因为数据参数将包含两个属性id和文本：

$("#test").select2({
    ajax: {
        url: "URL",
        dataType: 'json',
        delay: 250,
        data: function(params) {
            return {
                searchTerm: params.term, // search term
                page: params.page
            };
        },
        processResults: function(data, params) {
            var d = [];

            for (var i = data.length - 1; i >= 0; i--) {
              d.push({
                id: data[i].hostname, 
                text: data[i].hostname
              });
            }

            params.page = params.page || 0;
            return {
                results: d,
                pagination: {
                    more: (1 + params.page) < data.totalPages
                }
            };
        },
        cache: true
    },
    allowClear: true,
    escapeMarkup: function(markup) {
        return markup;
    },
    multiple: true,
    maximumSelectionLength: 22,
    placeholder: "Select fruits...",
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

function formatRepoSelection(data) {
    return data.text;
}

function formatRepo(data) {
    if (data.loading) return data.text;

    return data.text;
}

---

我知道这是一篇老文章，我想为其他任何人发一篇关于如何遇到类似情况的文章，我想对@B.Assem给出的答案进行扩展

对于processResults函数，如果返回的多个值希望显示在每个可用选择旁边，则应将它们分配给它们自己的键值对，然后可以在templateResult函数中访问它们

ajax:{
 processResults: function(data, params) {
        var r = JSON.parse(data);
        var d = [];
        $.each(r.customers, function(i,e){
          var o = {
            id: e.myID, // id for selection
            text: e.textToFillInput, // Will be used as diplay value for input on selection
            otherData: e.otherData, // some more data
            firstName: e.firstName, // another item
            etc: e.etc // etc...
          }
          d.push(o);// Push to array
        }

        return {
            results: d,
            pagination:{more:false|true} // is expected and should be a boolean
            }
  };
},
templateResult:function(data){
     console.log(data.id)
     console.log(data.text)
     console.log(data.otherData)
     console.log(data.firstName)
     console.log(data.etc)
},
templateSelection:function(data){
  return data.text || 'Default Text';
}

---

您可以发布ajax调用返回的结果吗？或者把它放在小提琴上？@B.Assem我在下面添加了一个输出数据的屏幕截图

ajax:{
 processResults: function(data, params) {
        var r = JSON.parse(data);
        var d = [];
        $.each(r.customers, function(i,e){
          var o = {
            id: e.myID, // id for selection
            text: e.textToFillInput, // Will be used as diplay value for input on selection
            otherData: e.otherData, // some more data
            firstName: e.firstName, // another item
            etc: e.etc // etc...
          }
          d.push(o);// Push to array
        }

        return {
            results: d,
            pagination:{more:false|true} // is expected and should be a boolean
            }
  };
},
templateResult:function(data){
     console.log(data.id)
     console.log(data.text)
     console.log(data.otherData)
     console.log(data.firstName)
     console.log(data.etc)
},
templateSelection:function(data){
  return data.text || 'Default Text';
}