mirror of
https://github.com/hargata/lubelog.git
synced 2025-12-10 00:46:08 -06:00
added datalist to tags field.
This commit is contained in:
parent
019a549b64
commit
e506b543e6
@ -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>
|
||||
}
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -139,8 +139,14 @@ function initDatePicker(input, futureOnly) {
|
||||
});
|
||||
}
|
||||
}
|
||||
function initTagSelector(input) {
|
||||
function initTagSelector(input, noDataList) {
|
||||
if (noDataList) {
|
||||
input.tagsinput({
|
||||
useDataList: false
|
||||
});
|
||||
} else {
|
||||
input.tagsinput();
|
||||
}
|
||||
}
|
||||
|
||||
function showMobileNav() {
|
||||
|
||||
@ -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');
|
||||
}
|
||||
});
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user