Select2 зависимый выпадающий с шаблонами и поиском - PullRequest
Новая
       32

Select2 зависимый выпадающий с шаблонами и поиском

0 голосов
/ 17 мая 2019

У меня есть 2 списка. Когда я выбираю значение в первом, он обновляет параметры во втором списке. Только второй список - это Select2.

enter image description here

Я заставил его работать, но функция поиска Select2 не работает.

enter image description here enter image description here

Если я проверяю DOM, я замечаю, что опции, сгенерированные Select2, не имеют текста. Из-за этого не работает поиск?

enter image description here

Вот мой код 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 в список, но я потерял шаблон результатов ...

enter image description here enter image description here

код: 

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

Как я должен кодировать это, чтобы иметь как шаблоны, так и поиск?

1 Ответ

0 голосов
/ 20 мая 2019

Извините, я только что обнаружил, что ошибся: я не показал правильные данные внутри функции результата моего шаблона.

Итак, в случае, если определенные данные не существовали, и,в другом случае эти данные существовали, и они заменили определенный шаблон, который я сделал ... Работать над ним не очень эффективно в пятницу днем.: D

Поэтому правильный способ сделать это - вручную добавить опции выбора в DOM и запустить 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
        });
    }
});
...