Use tom-select as tagsinput input

assets/controllers/elements/tagsinput_controller.js

@@ -1,13 +1,47 @@
 import {Controller} from "@hotwired/stimulus";
-import Bloodhound from "corejs-typeahead/dist/bloodhound";
-import 'corejs-typeahead';
-import '../../js/lib/tagsinput';
-import '../../css/tagsinput.css'
 
+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 = {
+            plugins: {
+                remove_button:{
+                }
+            },
+            persistent: false,
+            createOnBlur: true,
+            create: true,
+        };
+
         if(this.element.dataset.autocomplete) {
+            const base_url = this.element.dataset.autocomplete;
+            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 {"value": x, "text": x}});
+                        callback(data);
+                    }).catch(()=>{
+                    callback();
+                });
+            }
+        }
+
+        this._tomSelect = new TomSelect(this.element, settings);
+
+        /*if(this.element.dataset.autocomplete) {
             const engine = new Bloodhound({
                 //@ts-ignore
                 datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
@@ -27,6 +61,8 @@ export default class extends Controller {
             });
         } else { // Init tagsinput without typeahead
             $(this.element).tagsinput();
-        }
+        }*/
+
+
     }
 }