动态添加选项到 select2

Question

我已阅读所有可能的参考资料，了解如何将选项动态添加到 select2，但没有一个有效。我猜那些已经被复制了。

这种情况是我想要当用户在组合的搜索框中输入时，我在服务器中搜索我的列表并在列表中显示匹配的列表。

    <select class="js-data-example-ajax" id="mySelect2">
    </select>
    <script>
        $(document).ready(function() {
            $('.js-data-example-ajax').select2({
                language: "fa",
                dir: "rtl",
                ajax: {
                    url: 'search_employees',
                    processResults: function (data) {
                        for (i = 0; i < data.items.length; i++){
                            var newOption = new Option(data.items[i].name, data.items[i].id, false, false);
                            $('#mySelect2').append(newOption).trigger('change');
                        }
                    },
                    data: function (params) {
                        var query = {
                            search: params.term,
                            type: 'public'
                        };
                        // Query parameters will be ?search=[term]&type=public
                        return query;
                    }
                }
            });
        });
    </script>

我确信“search_employees”的回复是这样的：

{"items": [{"id": 8, "name": "Hamed"}]}

和 'data.items[i].name' 和 'data.items[i].id' 是正确的。

我在检查中检查了代码，该代码有一些 option> 标签，我的意思是这是有效的，并将 Hamed 添加为 option此 select> 中的 > 标记，但它们根本不显示。

我有什么遗漏吗？

tnx

Answer 1

为什么不在processResults 处理程序中简单地进行以下转换？

 processResults: function (data) {
    if (data.items && data.items.length==0) {
        $('.js-data-example-ajax').val(null).trigger('change');
    }
    return {
        results: $.map(data.items, function(obj) {
          return { id: obj.id, text: obj.name };
    })
 };

这是一个有效的小提琴：http://jsfiddle.net/beaver71/htqyybmc/

P.S.：在 jsfiddle 中，ajax 请求是模拟的，所以查询没有应用，结果也没有过滤