Плагин Tail.Select отображает теги li

Question

Я использую плагин https://github.com/pytesNET/tail.select, чтобы создать свой Combobox / Dropdowns. Все работает нормально, но я хотел бы изменить HTML отрисованных тегов <li> (как в раскрывающемся списке, так и в списке меток).

Вы можете увидеть плагин в действии в этом JSFiddle .

Согласно документации существует обратный вызов с именем cbLoopItem, который говорит:

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

• item Текущий item объект, который должен быть визуализирован
• optgroup Текущий элемент "group" / "parent"
• search Строка поиска (если это поиск), иначе не определена
• root root "dropdown-inner" объект.

Ваша собственная функция ДОЛЖНА возвращать объект Element, который добавляется в выпадающий список, но вы также можете вернуть null, чтобы пропустить этот единственный параметр, и false, чтобы прервать процесс рендеринга.

Обратите внимание

• Вы ДОЛЖНЫ вернуть <li> Элемент, если вы тоже не манипулируете cbLoopGroup!
• Вы НЕ ДОЛЖНЫ добавлять глобальные атрибуты ключа данных или группы данных!
• Вы НЕ ДОЛЖНЫ добавлять обработчик событий щелчка!

Так что, похоже, я мог бы использовать этот обратный вызов для рендеринга моего <li>. В настоящее время плагин создает следующее HTML:

<li class="dropdown-option" data-key="1" data-group="Header one">Value 1</li>

И я хочу, чтобы результат был примерно таким:

<li class="dropdown-option some-class-i-can-add" data-key="1" data-group="Header one">
    <i class="fab fa-amazon"></i> Value 1
</li>

Я пытался без успеха:

tail.select('#my-select',
{
    // ...
    cbLoopItem: function(item, optgroup, search, root)
    {
        var x =  $('<li>Testing first without icon</li>');

        return x;
    }
});

Но возвращает ошибку Uncaught TypeError: h.setAttribute is not a function.

Answer 1

Решено .

В документации написано "Вы ДОЛЖНЫ вернуть <li> Элемент (...)", и я возвращал либо только простую строку, либо объект jQuery.

Чтобы решить эту проблему, необходимо создать <li> с помощью функции document.createElement javascript.

tail.select('#my-select',
{
    cbLoopItem: function(item, optgroup, search, root)
    {
        var icon = '<i class="fab fa-amazon"></i>';
        var newItem = document.createElement('li');

        newItem.innerHTML = icon + item.value; // will create '<li><i class="fab fa-amazon"></i> Value 1</li>'

        return newItem;
    },
});

Это работает только для элементов в раскрывающемся списке. Контейнер меток не получает значок <i/>, что означает, что мне нужно использовать обратный вызов cbComplete и событие change для достижения конечной цели: всегда показывать значок независимо от того, находится ли он в контейнере или в раскрывающийся список.

cbComplete необходим, поскольку уже могут быть выбраны параметры (когда инициализируется плагин), и я хотел немедленно отобразить значок.

cbComplete: function(item)
{
    var labels = $(item).find('.select-handle');

    // might be null (none selected)
    if (!labels)
        return;

    var icon = '<i class="fab fa-amazon"></i>';

    $.each(labels, function(i, label)
    {
        var key         = $(label).attr('data-key');
        var text        = $(label).text();
        var originalLi  = $(item).find('.dropdown-inner').find('[data-key="' + key + '"]'); // must always exists

        $(label).html(icon + text);
    });
}

change событие запускается каждый раз, когда в контейнере меток выбрана опция:

tail.select('#my-select',
{
    //
}).on('change', function(item, state)
{
    // No need to do anything
    if (state == 'unselect')
        return;

    var labels = $(this.container).find('.select-handle');
    var dropdown = $(this.dropdown);

    // might be null (none selected)
    if (!labels)
        return;

    var icon = '<i class="fab fa-amazon"></i>';

    $.each(labels, function(i, label)
    {
        var key         = $(label).attr('data-key');
        var text        = $(label).text();
        var originalLi  = $(dropdown).find('.dropdown-inner').find('[data-key="' + key + '"]'); // must always exists

        $(label).html(icon + text);
    });
));

Я хотел иконку, но вы можете использовать изображение или что-то еще.

Вы можете увидеть конечный результат в этом JSFiddle .