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

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

Answer 1

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

#include <iostream>
using namespace std;

struct A {
    A() { cout << "A "; } 
};

struct B: A {
    B() { cout << "B "; }  
};

struct C: A {
    C() { cout << "C "; } 
};

struct D: C, B {
    D() { cout << "D "; }    
};

int main(){
    D d;
}

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

select2 4.0.0无法选择具有远程数据的项目

2 个答案: