предопределенный отрендеренный элемент select2 с ajax - PullRequest
Новая
       9

предопределенный отрендеренный элемент select2 с ajax

0 голосов
/ 22 мая 2018

Я могу легко извлекать и форматировать данные AJAX для работы с Select2, например: 

function formatItem (item) {
    if (!item.id) {
        return item.text;
    }
    var _item = '<span class="' + item.deleted +'"><i class="fa fa-user"></i> ' + item.doctor + ', <small>' + item.sex + ' (' + item.user + ')</small></span>';
    return $(_item);
}

var tabSelect = $('#t');
tabSelect.select2({
    ajax: {
        url: '../ajax/results.php',
        data: function (params) {
            return {
                search: params.term,
                page: params.page || 1
            };
        }
    },
    templateResult: formatItem,
    templateSelection: formatItem
});

Пока все хорошо: <select> элементы отображаются правильно как HTML, с симпатичным значком Font-Awesome итег <small>.

Теперь пользователь выбирает элемент и отправляет форму (поиска).Конечно, я хотел бы пометить текущий элемент как selected, и тут возникает проблема.

В документах Select2 есть способ предопределить извлеченный AJAX элемент , но это работает дляпростой текст, а не для отображаемых элементов со всеми прибамбасами HTML

Итак, при адаптации предоставленного примера: 

$.ajax({
    type: 'GET',
    url: '../ajax/results-selected.php', // url to retrieve a single item
    data: {
        iData: [here goes the ID for retrieving single item]
    }
}).then(function (data) {
    // create the option and append to Select2
    var item = data.results[0];
    console.log(item);
    var option = new Option(item, item.id, true, true);
    tabSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    tabSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

Я получаю отображаемый элемент HTML, но с серией undefined (обратите внимание, что console.log(item) возвращает ожидаемый результат: другими словами, у меня есть поля, но я не знаю, как их отобразить)

enter image description here

Я много чего перепробовал, но ни одна из них не сработала, например: 

var option = new Option(formatItem(item), item.id, true, true);

Я перечитал, но не смог найти подходящее решение: пожалуйста, какая-нибудь помощь?

1 Ответ

0 голосов
/ 23 мая 2018

Мне удалось это сделать, вернув весь HTML-фрагмент в ответе JSON (как элемент text) 

// the JSON response
{
    "results": [
        {
            "id": "1234",
            "text": "<span class=\"\"><i class=\"fa fa-user\"></i> Doe John, <small>Mr. (Site Owner)</small></span>"
         }
    ]
}


// the updated snippet
$.ajax({
    type: 'GET',
    url: '../ajax/results-selected.php', // url to retrieve a single item
    data: {
        iData: [here goes the ID for retrieving single item]
    }
}).then(function (data) {
    // create the option and append to Select2
    var item = data.results[0];
    console.log(item);
    var option = new Option(item.text, item.id, true, true);
    tabSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    tabSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});
...