select2 4.0.0 无法选择带有远程数据的项目答案

【问题标题】：select2 4.0.0 can't select items with remote dataselect2 4.0.0 无法选择带有远程数据的项目
【发布时间】：2016-12-29 10:45:07
【问题描述】：

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

HTML：

<div class="row">
    <select id="test" style="width: 300px" />
</div>

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;
}

这是输出数据，它是具有一个属性“content”的json对象，该属性具有“hostname”列表作为值

【问题讨论】：

可以贴出ajax调用返回的结果吗？或者把它放在小提琴上？
@B.Assem 我为输出数据添加了截图
在下面查看我的答案

标签： javascript jquery html thymeleaf select2

【解决方案1】：

您从服务器返回的数据格式不适合 select2 使用：select2 期望每个值都是一对 id/text，因此在您的 processResults 中您需要格式化结果并且您还需要根据 data 参数将包含两个属性 ID 和 TEXT 的事实修改两个渲染函数：

$("#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;
}

【讨论】：

【解决方案2】：

我知道这是一篇旧帖子，我想为其他任何人发布如何遇到类似情况并想扩展@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';
}

【讨论】：