select2 4.0.0 不能 select 带有远程数据的项目

Question

我正在使用 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;
}

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

Answer 1

您从服务器返回的数据格式不正确，无法供 select2 使用：select2 期望每个值都是一对 id/text，因此在您的 processResults 您需要格式化结果，还需要根据数据参数将包含两个属性 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;
}

Answer 2

我知道这是一个旧的 post 我想 post 其他任何人运行可能会遇到类似的情况，并且想扩展 @[= 给出的答案17=]

对于 "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';
}

select2 4.0.0 不能 select 带有远程数据的项目

select2 4.0.0 can't select items with remote data

html

javascript

jquery

thymeleaf

select2