asistencia/js/datalist.js

/* 
 * Selects con datalist
 */
var click_in_process = false;
var visible = false;

$('.datalist-text .datalist-input').on('focusin', function () {
    var elementRoot = $(this).parents('.datalist');

    elementRoot.find(".icono").show();
    elementRoot.find("ul").show();
    elementRoot.find(".datalist-input").trigger("keyup");
});



function ocultaList(e) {
    (e.data.padre).find('.icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
    (e.data.padre).find('ul').hide();
    // $('.datalist .icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
    // $('.datalist ul').hide();
}

function ocultaTodos() {
    $('.datalist .icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
    $('.datalist ul').hide();
}

//$('.datalist-input').click(function(){
$(document).on('click', '.datalist-input', function () {
    var elementRoot = $(this).parent();
    limpiaInput({ "data": { "padre": elementRoot } });

    const alreadyOpen = elementRoot.find('ul').is(':visible');
    if (alreadyOpen) {
        setTimeout(() => {
            ocultaTodos();
        }, 0);
        // stop all jquery animations
        return;
    }


    if (!elementRoot.hasClass("disabled")) {
        elementRoot.find('ul').show();
        elementRoot.find('.datalist-input').focus();
        elementRoot.find('ul').show();
        elementRoot.find('.icono').removeClass('ing-buscar').addClass('ing-cancelar iconoAzul pointer');
        elementRoot.find('.icono').on('click', { "padre": elementRoot }, limpiaInput);
        elementRoot.find('.icono').on('click', { "padre": elementRoot }, ocultaList);
    }

    // if other datalist is open, close it
    $('.datalist').each(function () {
        // get the input hidden from the datalist
        var inputHidden = $(this).find('input[type="hidden"]').attr('id');
        // get the input hidden from the datalist that was clicked
        var inputHiddenClicked = elementRoot.find('input[type="hidden"]').attr('id');
        if ($(this).find('ul').is(':visible') && inputHidden != inputHiddenClicked) {
            $(this).find('ul').hide();
            $(this).find('.icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
        }
    });


});

//usar class="selected" para marcar seleccioando por default
$(function () {
    $.each($(".datalist").find('ul li:not(.not-selectable)'), function () {
        if ($(this).hasClass("selected")) {
            var elementRoot = $(this).parents('.datalist');
            elementRoot.find('.datalist-input').html($(this).html().replace(/[\t\n]+/g, ' ').trim());
            var cid = $(this).data('id');
            elementRoot.find("input[type=hidden]").val(cid);
        }
    });

    // add not-selectable class to all li elements and the .datalist-input element
    $('.datalist-input ul li, .datalist-input').addClass('user-select-none');
});

$(document).on('click', '.datalist-select > ul li:not(.not-selectable)', function () {
    var elementRoot = $(this).parents('.datalist');
    elementRoot.find('.datalist-input').html($(this).html().replace(/[\t\n]+/g, ' ').trim());
    // $(this).parent('ul').siblings('input[type="text"]').blur();
    ocultaList({ "data": { "padre": elementRoot } });
    var cid = $(this).data('id');
    elementRoot.find("input[type=hidden]").val(cid);
    elementRoot.find("li").removeClass("selected");
    $(this).addClass("selected");
    elementRoot.removeClass("datalist-invalid");
});

$('.modal').on('hide.bs.modal', function (e) {
    $('.datalist .icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
    $('.datalist ul').hide();
});

function setDatalist(selector, value = -1) {
    var elementRoot = $(selector).parents('.datalist');
    $.each(elementRoot.find('ul li:not(.not-selectable)'), function () {
        if ($(this).data("id") == value) {
            elementRoot.find('.datalist-input').text($(this).html().replace(/[\t\n]+/g, ' ').trim());
            $(selector).val(value);
            elementRoot.find("li").removeClass("selected");
            $(this).addClass("selected");
        }
    });
}

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");
        ocultaList({ "data": { "padre": elementRoot } });
    } 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;
}
//---
$('.datalist-text .datalist-input').keyup(function () {
    var elementRoot = $(this).parents('.datalist');
    var input = $(this);
    elementRoot.find('ul li').each(function () {
        var elem = $(this);
        if ($(this).parent().is('li'))
            elem = $(this).parent();
        if (!$(this).html().toUpperCase().includes(input.val().toUpperCase()))
            $(elem).hide();
        else
            $(elem).show();
    });
});

/*
$('.datalist-text input').blur(function() {
    var elementRoot = $(this).parents('.datalist');
    console.log("Click? "+click_in_process);
    if(!click_in_process) {
        buscaDatalist(elementRoot, elementRoot.find('.datalist-input').val());
        
        elementRoot.find('.icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
        elementRoot.find('ul').children('li').show();
        elementRoot.find('ul').hide();
    }
    click_in_process = false;
});
*/

$('.datalist-text > ul li:not(.not-selectable)').click(function () {
    console.log("Li click!" + $(this).html());
    var elementRoot = $(this).parents('.datalist');
    elementRoot.find('.datalist-input').val($(this).html().replace(/[\t\n]+/g, ' ').trim());

    //$(this).parent('ul').siblings('input[type="text"]').blur();

    var cid = $(this).data('id');
    elementRoot.find("input[type=hidden]").val(cid);
    elementRoot.find("li").removeClass("selected");
    $(this).addClass("selected");
    click_in_process = true;
    //elementRoot.find('.datalist-input').blur();
    ocultaList({ "data": { "padre": elementRoot } });
});

/* $('.datalist-text .datalist-input').click(function () {
    var elementRoot = $(this).parents('.datalist');
    limpiaInput({ "data": { "padre": elementRoot } });
    const alreadyOpen = elementRoot.find('ul').is(':visible');
    console.log("Click! " + alreadyOpen);
    elementRoot.find('ul').show();
    elementRoot.find('input').focus();
    elementRoot.find('ul').show();
    elementRoot.find('.icono').removeClass('ing-buscar').addClass('ing-cancelar iconoAzul pointer');
    elementRoot.find('.icono').on('click', { "padre": elementRoot }, limpiaInput);
}); */

$(document).on('click', function (e) {
    var target = $(e.target);
    // or if you click in the .datalist-input and the datalist is visible
    let isDatalist = target.parents().addBack().is('.datalist');
    // alert(isDatalist);

    if (!isDatalist)
        ocultaList({ "data": { "padre": $('.datalist') } });
    // if the data list is visible and you click in the input, hide the list
});


function limpiaInput(e) {
    (e.data.padre).find('.datalist-input').val('');
    (e.data.padre).find('.datalist-input').parent().children('ul').children('li').show();
    (e.data.padre).find('li:first').focus();
    (e.data.padre).find('.datalist-input').focus();

}

// function make required
function makeRequiredDatalist(selector, required = true) {
    var elementRoot = $(selector).parents('.datalist');
    if (required)
        elementRoot.addClass("required");
    else
        elementRoot.removeClass("required");
}

// function validate
function validateDatalist(selector) {
    var elementRoot = $(selector).parents('.datalist');
    if (elementRoot.hasClass("required") && $(selector).val() == "") {
        invalidDatalist(selector, true);
        return false;
    }
    invalidDatalist(selector, false);
    return true;
}