added datalist to tags field.

This commit is contained in:
DESKTOP-T0O5CDB\DESK-555BD 2024-02-01 13:50:30 -07:00
parent 019a549b64
commit e506b543e6
7 changed files with 66 additions and 6 deletions

View File

@ -10,6 +10,12 @@
{
<span onclick="filterGarage(this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
}
<datalist id="tagList">
@foreach (string recordTag in recordTags)
{
<!option value="@recordTag"></!option>
}
</datalist>
</div>
</div>
}

View File

@ -15,6 +15,12 @@
{
<span onclick="filterTable('accident-tab-pane', this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
}
<datalist id="tagList">
@foreach (string recordTag in recordTags)
{
<!option value="@recordTag"></!option>
}
</datalist>
</div>
<div>
@if (enableCsvImports)

View File

@ -15,6 +15,12 @@
{
<span onclick="filterTable('servicerecord-tab-pane', this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
}
<datalist id="tagList">
@foreach (string recordTag in recordTags)
{
<!option value="@recordTag"></!option>
}
</datalist>
</div>
<div>
@if (enableCsvImports)

View File

@ -15,6 +15,12 @@
{
<span onclick="filterTable('upgrade-tab-pane', this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
}
<datalist id="tagList">
@foreach (string recordTag in recordTags)
{
<!option value="@recordTag"></!option>
}
</datalist>
</div>
<div>
@if (enableCsvImports)

View File

@ -139,9 +139,15 @@ function initDatePicker(input, futureOnly) {
});
}
}
function initTagSelector(input) {
function initTagSelector(input, noDataList) {
if (noDataList) {
input.tagsinput({
useDataList: false
});
} else {
input.tagsinput();
}
}
function showMobileNav() {
$(".lubelogger-mobile-nav").addClass("lubelogger-mobile-nav-show");

View File

@ -214,7 +214,7 @@ function editVehicle(vehicleId) {
$.get(`/Vehicle/GetEditVehiclePartialViewById?vehicleId=${vehicleId}`, function (data) {
if (data) {
$("#editVehicleModalContent").html(data);
initTagSelector($("#inputTag"));
initTagSelector($("#inputTag"), true);
$('#editVehicleModal').modal('show');
}
});

View File

@ -34,7 +34,6 @@
*/
function TagsInput(element, options) {
this.itemsArray = [];
this.$element = $(element);
this.$element.hide();
@ -44,8 +43,13 @@
this.placeholderText = element.hasAttribute('placeholder') ? this.$element.attr('placeholder') : '';
this.inputSize = Math.max(1, this.placeholderText.length);
var useDataList = true;
if (options != undefined && !options.useDataList) {
useDataList = false;
}
this.$container = $('<div class="form-control bootstrap-tagsinput"></div>');
this.$input = $('<input type="text" placeholder="' + this.placeholderText + '"/>').appendTo(this.$container);
this.$input = $(`<input type="text" ${!useDataList ? "" : "list='tagList'"}placeholder="` + this.placeholderText + '"/>').appendTo(this.$container);
this.$element.before(this.$container);
@ -422,6 +426,32 @@
$input.attr('size', Math.max(this.inputSize, $input.val().length));
}, self));
self.$container.on('input', 'input', $.proxy(function (event) {
if (event.originalEvent.data == undefined) {
var $input = $(event.target);
var text = $input.val(),
maxLengthReached = self.options.maxChars && text.length >= self.options.maxChars;
if (self.options.freeInput && (keyCombinationInList(event, self.options.confirmKeys) || maxLengthReached)) {
//check if confirm keys are in input and then replace them.
text = text.replace(String.fromCharCode(event.which), "")
// Only attempt to add a tag if there is data in the field
if (text.length !== 0) {
self.add(maxLengthReached ? text.substr(0, self.options.maxChars) : text);
$input.val('');
}
// If the field is empty, let the event triggered fire as usual
if (self.options.cancelConfirmKeysOnEmpty === false) {
event.preventDefault();
}
}
var textLength = $input.val().length,
wordSpace = Math.ceil(textLength / 5),
size = textLength + wordSpace + 1;
$input.attr('size', Math.max(this.inputSize, $input.val().length));
};
}));
self.$container.on('keypress', 'input', $.proxy(function(event) {
var $input = $(event.target);