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 '是正确的。

我检查了检查中的代码，有一些＆lt; 选项＆gt;此代码的标记，我的意思是这是有效的，并将 Hamed 添加为＆lt; 选项＆gt;此标记内的标记＆lt; 选择＆gt;但它们根本没有显示出来。

我有什么遗失的吗？

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请求，因此查询未应用且结果未被过滤

添加选项以动态选择2

1 个答案: