diff --git a/assets/controllers/elements/attachment_autocomplete_controller.js b/assets/controllers/elements/attachment_autocomplete_controller.js new file mode 100644 index 00000000..df6f3bf0 --- /dev/null +++ b/assets/controllers/elements/attachment_autocomplete_controller.js @@ -0,0 +1,60 @@ +import {Controller} from "@hotwired/stimulus"; + +import "tom-select/dist/css/tom-select.bootstrap5.css"; +import '../../css/tom-select_extensions.css'; +import TomSelect from "tom-select"; + +export default class extends Controller { + _tomSelect; + + connect() { + + let settings = { + persistent: false, + create: true, + maxItems: 1, + createOnBlur: true, + render: { + item: (data, escape) => { + return '' + escape(data.label) + ''; + }, + option: (data, escape) => { + if (data.image) { + return "
" + data.label + "
" + } + return '
' + escape(data.label) + '
'; + } + } + }; + + if(this.element.dataset.autocomplete) { + const base_url = this.element.dataset.autocomplete; + settings.searchField = "label"; + settings.sortField = "label"; + settings.valueField = "label"; + settings.load = (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(()=>{ + callback(); + }); + }; + } + this._tomSelect = new TomSelect(this.element, settings); + } + +} diff --git a/src/Form/AttachmentFormType.php b/src/Form/AttachmentFormType.php index 1b332fbf..ef8a1c6d 100644 --- a/src/Form/AttachmentFormType.php +++ b/src/Form/AttachmentFormType.php @@ -114,7 +114,8 @@ class AttachmentFormType extends AbstractType 'label' => 'attachment.edit.url', 'required' => false, 'attr' => [ - 'data-autocomplete' => $this->urlGenerator->generate('typeahead_builtInRessources', ['query' => 'QUERY']), + 'data-controller' => 'elements--attachment-autocomplete', + 'data-autocomplete' => $this->urlGenerator->generate('typeahead_builtInRessources', ['query' => '__QUERY__']), //Disable browser autocomplete 'autocomplete' => 'off', ],