paad/js/datalist.js

$(function () {
    const toggleIcon = (el, fromClass, toClass) => $(el).removeClass(fromClass).addClass(toClass);

    const ocultaTodos = () => {
        toggleIcon('.datalist .icono', 'ing-cancelar iconoAzul pointer', 'ing-buscar');
        $('.datalist ul').hide();
    };

    $(document)
        .on('click', '.datalist-input,.icono', function () {
            const parent = $(this).parent();
            $(".datalist ul:visible").not(parent.find('ul')).siblings('.datalist-input').trigger('click');
            if (parent.find('ul').is(':visible') || parent.hasClass("disabled")) return ocultaTodos();

            parent.find('ul, .datalist-input').show();
            toggleIcon(parent.find('.icono'), 'ing-buscar', 'ing-cancelar iconoAzul pointer');
        })
        .on('click', '.datalist-select > ul li:not(.not-selectable)', function () {
            const parent = $(this).closest('.datalist');
            parent.find('.datalist-input').text($(this).text().trim());
            parent.find("input[type=hidden]").val($(this).data('id'));
            $('.datalist li').removeClass("selected");
            $(this).addClass("selected");
            parent.removeClass("datalist-invalid");
            ocultaTodos();
        })
        .on('click', (e) => {
            if (!$(e.target).closest('.datalist').length) ocultaTodos();
        });

    $('.modal').on('hide.bs.modal', ocultaTodos);
});
const setDatalist = (selector, value = -1) => {
    const parent = $(selector).closest('.datalist');
    parent.find('ul li:not(.not-selectable)').each(function () {
        if ($(this).data("id") !== value) return;
        parent.find('.datalist-input').text($(this).text().trim());
        $(selector).val(value);
        $('.datalist li').removeClass("selected");
        $(this).addClass("selected");
    });
}
const makeRequiredDatalist = (selector, required = true) => $(selector).closest('.datalist').toggleClass("required", required);

//---------

function setDatalistFirst(selector) {
    var index = 1;
    var elementRoot = $(selector).parents('.datalist');
    var num = elementRoot.find('ul li:not(.not-selectable)').length;
    if (index <= num) {
        while (elementRoot.find('ul li:nth-child(' + index + ')').hasClass("not-selectable") && index <= num) {
            index++;
        }
        var element = elementRoot.find('ul li:nth-child(' + index + ')');
        elementRoot.find('.datalist-input').text(element.html().replace(/[\t\n]+/g, ' ').trim());
        $(selector).val(element.data("id"));
        elementRoot.find("li").removeClass("selected");
        element.addClass("selected");
    }
}

function disableDatalist(selector, disabled = true) {
    var elementRoot = $(selector).parents('.datalist');
    if (disabled) {
        elementRoot.addClass("disabled");
        elementRoot.find('.icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
        elementRoot.find('ul').hide();
    } else
        elementRoot.removeClass("disabled");
}

function invalidDatalist(selector, invalid = true) {
    var elementRoot = $(selector).parents('.datalist');
    if (invalid) {
        elementRoot.addClass("datalist-invalid");
    } else
        elementRoot.removeClass("datalist-invalid");
}

function buscaDatalist(selector, valor) {
    selector.find('ul li').each(function () {
        var elem = $(this);
        if ($(this).parent().is('li'))
            elem = $(this).parent();
        if (!$(this).html().toUpperCase().includes(valor.toUpperCase())) {
            $(elem).hide();
            selector.find('.datalist-input').val("");
            selector.find("input[type=hidden]").val("");
        } else
            $(elem).show();
    });
}
function getDatalistText(selector, valor) {
    var elementRoot = $(selector).parents('.datalist');
    var text = "";
    $.each(elementRoot.find('ul li:not(.not-selectable)'), function () {
        if ($(this).data("id") == valor) {
            text = $(this).html();
        }
    });
    return text;
}