Как добавить содержимое HTML в выпадающем списке Select2

Я использовал Select2 plugin для ввода тега. Вот сценарий моей основной работы. Мне нужно показать "используемый номер" каждого параметра/тега в раскрывающемся списке следующим образом:

TxMPftm.png

Я создал класс для этого числа в моем CSS (.used-number). Но я не понимаю, как добавить этот номер для каждого параметра в свой HTML файл. Есть ли способ добавить что-то вроде этого (или любым другим способом):

$(".tag").select2({
     data:[{tag: 'red',text:'3',className: 'used-number'},{tag: 'green',text:'12',className: 'used-number'},{tag: 'blue',text:'5', className: 'used-number'},{tag: 'black',text:'7'}]
});

});

Ответы

Ответ 1

Массив tags должен содержать объекты с ключами id и text. Вы можете добавить больше ключей, если вам нужно (для вашего случая я добавил ключ qt, который представляет номер).

Чтобы добавить HTML в параметр, вам нужно изменить функцию formatResult по умолчанию. В следующем коде номера отображаются для существующих тегов (т.е. Теги, переданные select2). Для параметров, созданных "на лету", номер не появится.

$(".tag").select2({
    tags:[
        {id: "red", text: "red", qt: 3},
        {id: "green", text: "green", qt: 12},
        {id: "blue", text: "blue", qt: 5},
        {id: "black", text: "black", qt: 7}
    ],
    formatResult: function(result) {
        if (result.qt === undefined) {
            return result.text;
        }

        return result.text
            + "<span class='used-number'>"
            + result.qt
            + "</span>";
    }
});

Смотрите разветвленную скрипку.