Javascript 选择2-从后端获取数据并向selectbox添加选项

我目前正试图让select2正常工作，但我现在有点挣扎。我想要实现的是相当简单的：我从Web服务器获取JSON，它由键/值对（一个ID对应一个字符串）组成。获取这些选项后，我想从中创建选项，并将它们添加到select2中，以便用户可以选择其中一个选项

我尽可能接近文档中的代码：

$('#catSearchBox').select2({
    width: '500px',
    ajax: {
        url: "url/to/data",
        dataType: 'json',
        delay: 250,
        cache: false,
        data: function (params) {
            return {
                searchKey: params.term
            };
        },
        processResults: function (data, params) {
            $.each(data, function(catName, catId) {
                var newOption = new Option(catId, catName, false, false);
                $('#catSearchBox').append(newOption).trigger('change');
            });
        }
    },
    placeholder: 'Suche nach Kategorie ...',
    minimumInputLength: 3
});

现在，这里的一切都可以正常工作，直到

追加

。当我搜索任何内容时，都会正确生成选项，但是，追加似乎失败了，因为根本没有显示任何选项。看起来是这样的：

但是，这并不是因为响应为空或无效，而是因为这些选项是明确创建的：

我在这里有点不知所措，我不明白为什么我的代码不起作用，特别是因为我尽可能接近文档中的代码（和）

---

有人知道如何解决这个问题吗？如果您需要我可能遗漏的任何其他信息，请告诉我。

我不确定这是否是解决方案，但您的代码中有两件事我不太喜欢

试试这个：

processResults: function (data, params) {
    //  First, remove all previous elements
    $('#catSearchBox').html('');
    $.each(data, function(catName, catId) {
        var newOption = new Option(catId, catName, false, false);
        $('#catSearchBox').append(newOption);
    });
    //  Second, fire change when all elements are appended
    $('#catSearchBox').trigger('change');
}

---

我认为主要问题在于

处理结果

函数和Select2对它的期望

根据我在的文档中部分阅读和部分推断，

processResults

应该返回一个包含键

results

的对象，这些结果应该是一个对象数组。下面是一些示例，显示这些对象包含两个键-

id

和

text

此外，它的信息框表示select2将仅为所选元素创建

（这是出于性能原因）。这意味着您不应该自己创建

元素，只需返回预期格式的数据，然后选择2即可完成其余部分

这是一个基于您的代码的小提琴：它不工作，它抛出一个错误，试图访问未定义的

结果

这是另一种类似行为，但根据文档中的发现执行：
processResults不用于将选项附加到select2。它用于转换来自API的响应。它应该返回一个有效的对象数组来馈送select2

比如：

var newData = [];
$.each(data, function(catName, catId) {
    newData.push({ id: catId, text: catName });
});

return { results: newData };

请确保：您用于获取数据的API返回正确格式的数据？您能否在
console.log（data）
函数中共享
processResults
返回的内容？@DavidGildour是的，数据是100%正确的。我已经检查了很多次了。@palaѕѕѕ，问题已经解决了。正如下面mkilmanas所指出的，processResults必须返回一个包含结果的对象，这是我在阅读文档时明显遗漏的。很高兴它为您解决了问题。噢，哇，这就是问题所在。我收到错误消息
t未定义
，应该怀疑这是问题所在。我当时只是不太理解文档，好吧。感谢你对答案的澄清和努力，我现在就可以开始工作了，可以删除我的恶意代码了！我只是希望文档对我们这些不太使用JS的人来说更清晰一点。是的，文档不是很好。但我认为阅读文档需要几年时间才能开始注意到小细节，并在不相关的部分中查找信息：）