javascript - 动态添加选项到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”是正确的。

我检查了 inspect 中的代码，此代码有一些 <option> 标记，我的意思是它正在工作并将 Hamed 添加为 < 选项> 标记在此 <select> 中，但它们根本不显示。

有什么我遗漏的吗？

发送

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

这是一个有效的 fiddle :http://jsfiddle.net/beaver71/htqyybmc/

P.S.:在 jsfiddle 中模拟了 ajax 请求，因此查询未应用且结果未被过滤