kendo-ui - 如何优化具有 5000 个项目的 Kendo UI Combobox 的数据源？

Question

在我的测试-> http://jsfiddle.net/olragon/642c4/12/中，KendoUI Combobox 无法运行 5000 个项目，如何在不调用服务器端数据源的情况下使其工作，或者这是 KendoUI 的限制？

HTML

<h3>T-shirt Fabric</h3>
<input id="fabric" placeholder="Select fabric..." />

JS

/**
 * Returns a random integer between min and max
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(document).ready(function() {
    var superData = []
    ,   data = [
            { text: "Cotton", value: "1" },
            { text: "Polyester", value: "2" },
            { text: "Cotton/Polyester", value: "3" },
            { text: "Rib Knit", value: "4" }
        ];

    for(var _i=0; _i<5000; _i++) {
        var randomEntry = data[getRandomInt(0,data.length-1)];
        randomEntry.text += '-' + _i;
        randomEntry.value += _i;
        superData.push(randomEntry);
    }

    // create ComboBox from input HTML element
    $("#fabric").kendoComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: superData,
        filter: "contains",
        suggest: true,
        index: 3
    });
});

更新

• 小提琴链接已更新。
• KendoUI 尚不支持 Combobox 的虚拟滚动和分页

Answer 1

问题不在 Kendo UI ComboBox 中，而是在您的循环中。你检查过它做了什么（不是你想要它做什么）？我会说有一个错误，因为data[getRandomInt(0,data.length-1)]不返回一个新元素而是一个引用，所以你多次将“_i”附加到相同的 5 个元素上，以构建一个非常长的字符串。

试试这个：

for (var _i = 0; _i < 5000; _i++) {
    var randomEntry = data[getRandomInt(0, data.length - 1)];
    var newEntry = {
        text: randomEntry.text + '-' + _i,
        value            : randomEntry.value += _i
    };
    superData.push(newEntry);
}

在此处检查 Fiddle 的修改版本：http: //jsfiddle.net/OnaBai/642c4/14/