Блог

Главная - Вопросы по программированию - select2: как обновить параметры после динамической загрузки содержимого ajax без сброса окна поиска?

select2: как обновить параметры после динамической загрузки содержимого ajax без сброса окна поиска?

#javascript #jquery-select2

#javascript #jquery-select2

Вопрос:

Я прочитал документацию select2, и, похоже, у нее нет способа обновить параметры, не закрывая выбор.

Текущий способ сделать это (работает, но сбрасывает поисковый запрос):

 $('#charity-list').select2('close');
$('#charity-list').select2('open');

Полный код:

 function fetchCharityListForSearchTerm(searchTerm) {
    console.log('search term ', searchTerm);
    axios({
        method: 'post',
        url: '/api/charities/search',
        data: {
            search_term: searchTerm
        }
    })
    .then(function (response) {
        var charitySelect = document.getElementById('charity-list');
        var charities = response.data.data;

        charitySelect.options.length = 0;
        
        charities.forEach((entry) => {
            var newOption = new Option(entry.name, entry.charity_id, false, false);
            $('#charity-list').append(newOption).trigger('change');
        });

        $('#charity-list').select2('close');
        $('#charity-list').select2('open');
    });
}

Комментарии:

1. Вероятно, для этого вам следует использовать опцию выборки данных Ajax в select2 select2.org/data-sources/ajax

2. @Ashu Я так и сделал, и все результаты привели к выделению серым цветом параметров, которые я не смог выбрать, без какой-либо документации со страницы select2 о том, почему.

Ответ №1:

вызов, когда пришел ajax после успешной функции ajax

 > $('#charity-list').val(null).trigger('change.select2');

Комментарии:

1. Да, я пробовал это, это не сработало. Кажется, это работает, если вы щелкаете из текстового поля, а затем возвращаетесь обратно, но это не приводит к автоматическому обновлению параметров по мере их добавления в <select> тег.