groove/Part-DB-server
1
0
Fork 0
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2026-01-21 01:29:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

made autocomplete controller allow selecting text and autocommit typed text on blur

Browse source
This commit is contained in:
jona 2025-01-14 07:54:21 +01:00
parent d0937218b9
commit 87d29f50aa
1 changed files with 80 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

108
assets/controllers/elements/attachment_autocomplete_controller.js
View file

@ -27,58 +27,110 @@ export default class extends Controller {
_tomSelect;
connect() {
const self = this;
let settings = {
persistent: false,
create: true,
maxItems: 1,
maxItems: 5,
createOnBlur: true,
selectOnTab: true,
//This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
delimiter: ' ',
render: {
item: (data, escape) => {
return '<span>' + escape(data.label) + '</span>';
item: function item(data, escape) {
var tpl = document.createElement('template');
tpl.innerHTML = '<span>|' + escape(data.label) + '|</span>';
var thing = tpl.content.firstChild;
thing.addEventListener('click', evt => {
if (!self._tomSelect.isFocused) {
//return;
}
if (self._tomSelect.isLocked) return;
var val = self._tomSelect.inputValue()
if (self._tomSelect.options[val]) {
self._tomSelect.addItem(val)
} else if (self._tomSelect.settings.create) {
self._tomSelect.createItem();
}
self._tomSelect.setTextboxValue()
self._tomSelect.focus();
self._tomSelect.removeItem(thing);
}
);
return thing;
},
option: (data, escape) => {
option: function option(data, escape) {
if (data.image) {
return "<div class='row m-0'><div class='col-2 pl-0 pr-1'><img class='typeahead-image' src='" + data.image + "'/></div><div class='col-10'>" + data.label + "</div></div>"
return "<div class='row m-0'><div class='col-2 pl-0 pr-1'><img class='typeahead-image' src='" + data.image + "'/></div><div class='col-10'>" + data.label + "</div></div>";
}
return '<div>' + escape(data.label) + '</div>';
}
},
onInitialize: function () {
},
onItemRemove: function (value) {
console.log(value)
console.log(self._tomSelect.options)
self._tomSelect.setTextboxValue(value);
if (self._tomSelect.control_input.value.trim() === '') {
var option = self.options[value];
if (option) {
}
}
},
plugins: {//'restore_on_backspace': {},
//'remove_button': {}
}
};
if(this.element.dataset.autocomplete) {
const base_url = this.element.dataset.autocomplete;
if (this.element.dataset.autocomplete) {
var base_url = this.element.dataset.autocomplete;
settings.searchField = "label";
settings.sortField = "label";
settings.valueField = "label";
settings.load = (query, callback) => {
if(query.length < 2){
settings.load = function (query, callback) {
if (query.length < 2) {
callback();
return;
}
const url = base_url.replace('__QUERY__', encodeURIComponent(query));
fetch(url)
.then(response => response.json())
.then(json => {
const data = json.map(x => {
return {
"label": x.name,
"image": x.image,
}
});
callback(data);
}).catch(()=>{
var url = base_url.replace('__QUERY__', encodeURIComponent(query));
fetch(url).then(function (response) {
return response.json();
}).then(function (json) {
var data = json.map(function (x) {
return {
"label": x.name,
"image": x.image
};
});
callback(data);
})["catch"](function () {
callback();
});
};
}
;
}
this._tomSelect = new TomSelect(this.element, settings);
}
this._tomSelect = new tom_select__WEBPACK_IMPORTED_MODULE_31__["default"](this.element, settings);
this._tomSelect.hook("before", "onBlur", function () {
var val = self._tomSelect.inputValue()
if (!self._tomSelect.isLocked && self._tomSelect.options[val]) {
self._tomSelect.addItem(val)
self._tomSelect.setTextboxValue()
}
});
this._tomSelect.hook("before", "onKeyPress", function (e) {
var character = String.fromCharCode(e.keyCode || e.which);
if (!self._tomSelect.isLocked && self._tomSelect.settings.mode === 'multi' && character === self._tomSelect.settings.delimiter) {
var val = self._tomSelect.inputValue()
if (self._tomSelect.options[val]) {
self._tomSelect.addItem(val)
self._tomSelect.setTextboxValue()
}
}
});
}
disconnect() {
super.disconnect();
//Destroy the TomSelect instance