带有模板和搜索的 Select2 相关下拉列表

Question

我有 2 个列表。当我 select 第一个中的值时，它会更新第二个列表中的选项。只有第二个列表是 Select2。

我成功了，但 Select2 的搜索功能不起作用。

如果我检查 DOM，我注意到 Select2 生成的选项没有文本。是不是因为这个搜索不出来？

这是我的 JS 代码：

$('.category').change(function(event) {
    var measure = $(this).parents('.row').find('.measure');

    // Modify placeholder when searching
    measure.prop('disabled', true).select2({placeholder: "Searching..."});

    // Remove existing options of the list (of a previous usage)
    measure.children('option').each(function(index, el) {
        if ($(el).val().length > 0)
            $(el).remove();
    });

    var DATA = 'tagcat=' + $(this).val();

    $.ajax({
        type    : "GET",
        url     : $('.custom-table-container').data('search-js'),
        data    : DATA,
        cache   : false,
        success : function(response) {
            var data = JSON.parse(response);

            // Update the measures list    
            measure.select2({
                allowClear       : true,
                data             : data.items,
                escapeMarkup     : function (markup) { return markup; },
                templateResult   : formatTag,
                templateSelection: formatTagSelect
            }).prop('disabled', false);
        }
    });
});

我能够通过在列表中手动添加 HTML 选项来进行搜索，但我丢失了结果模板...

代码：

$.ajax({
    // ...
    success : function(response) {
        var data = JSON.parse(response);

        data.items.forEach(function(tag) {
            // create the option and append to Select2
            var option = new Option(tag.name, tag.id, false, false);
            measure.append(option);
        });

        measure.select2({
            allowClear          : true,
            data                : data.items,
            escapeMarkup        : function (markup) { return markup; },
           templateResult       : formatTag,
           templateSelection    : formatTagSelect
        }).prop('disabled', false);
    }
});

我应该如何对此进行编码以同时具有模板和搜索功能？

Answer 1

抱歉，我刚刚发现我错了：我没有在我的模板结果函数中显示正确的数据。

所以，在一种情况下它起作用是因为特定数据不存在，而在另一种情况下，该数据存在并且它替换了我所做的特定模板......周五下午处理它不是很有效. :D

所以正确的做法是在DOM中手动添加select的选项，然后初始化Select2。

$.ajax({
    // ...
    success : function(response) {
        var data = JSON.parse(response);

        // create options in the DOM
        data.items.forEach(function(tag) {
            // create the option and append to Select2
            var option = new Option(tag.name, tag.id, false, false);
            measure.append(option);
        });

        // init Select2 with data
        measure.select2({
            theme               : "bootstrap4",
            placeholder         : "- Select a measure -",
            allowClear          : true,
            data                : data.items,
            escapeMarkup        : function (markup) { return markup; },
           templateResult       : formatTag,
           templateSelection    : formatTagSelect
        });
    }
});

带有模板和搜索的 Select2 相关下拉列表

Select2 dependent dropdown with templating and search

ajax

jquery

jquery-select2

jquery-select2-4

dropdown