265 lines
9.3 KiB
JavaScript
265 lines
9.3 KiB
JavaScript
/*
|
|
* 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').text($(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').text($(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;
|
|
}
|