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 "
"
+ }
+ 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',
],