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; _tomSelect;
connect() { connect() {
const self = this;
let settings = { let settings = {
persistent: false, persistent: false,
create: true, create: true,
maxItems: 1, maxItems: 5,
createOnBlur: true, createOnBlur: true,
selectOnTab: true, selectOnTab: true,
//This a an ugly solution to disable the delimiter parsing of the TomSelect plugin //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: { render: {
item: (data, escape) => { item: function item(data, escape) {
return '<span>' + escape(data.label) + '</span>'; 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) { 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>'; 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) {
if(this.element.dataset.autocomplete) { var base_url = this.element.dataset.autocomplete;
const base_url = this.element.dataset.autocomplete;
settings.searchField = "label"; settings.searchField = "label";
settings.sortField = "label"; settings.sortField = "label";
settings.valueField = "label"; settings.valueField = "label";
settings.load = (query, callback) => { settings.load = function (query, callback) {
if(query.length < 2){ if (query.length < 2) {
callback(); callback();
return; return;
} }
const url = base_url.replace('__QUERY__', encodeURIComponent(query)); var url = base_url.replace('__QUERY__', encodeURIComponent(query));
fetch(url).then(function (response) {
fetch(url) return response.json();
.then(response => response.json()) }).then(function (json) {
.then(json => { var data = json.map(function (x) {
const data = json.map(x => { return {
return { "label": x.name,
"label": x.name, "image": x.image
"image": x.image, };
} });
}); callback(data);
callback(data); })["catch"](function () {
}).catch(()=>{
callback(); 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() { disconnect() {
super.disconnect(); super.disconnect();
//Destroy the TomSelect instance //Destroy the TomSelect instance