combobox remote

lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css

@@ -44,6 +44,10 @@
     padding: var(--size-1_5) var(--size-2);
   }
 
+  .create {
+    padding: var(--size-1_5) var(--size-2);
+  }
+
   .option {
     border: 1px solid transparent;
     border-radius: var(--rounded-md);
@@ -58,6 +62,14 @@
   .highlight {
     background-color: transparent !important;
   }
+
+  .spinner {
+    margin: var(--size-1_5) 0 0;
+  }
+
+  .spinner::after {
+    border-block-color: var(--color-border-dark);
+  }
 }
 
 .ts-wrapper.single .ts-control {

lib/generators/css_zero/add/templates/app/javascript/controllers/combobox_controller.js

@@ -1,39 +1,47 @@
 import { Controller } from "@hotwired/stimulus"
-import TomSelect from "tom-select";
+import { get } from "@rails/request.js"
+import TomSelect from "tom-select"
 
 export default class extends Controller {
-  static values = {
-    createText: { type: String, default: "Add" },
-    noResultsText: { type: String, default: "No results found" }
+  static values = { url: String, create: { type: String, default: "Add" }, noResults: { type: String, default: "No results found" } }
+
+  initialize() {
+    this.load = this.load.bind(this)
   }
 
   connect() {
     if (this.element.nodeName === "INPUT") {
-      this.tomSelect = new TomSelect(this.element, this.#inputOptions)
+      this.tomSelect = new TomSelect(this.element, this.#inputSettings)
     } else {
-      this.tomSelect = new TomSelect(this.element, this.#selectOptions)
+      this.tomSelect = new TomSelect(this.element, this.#selectSettings)
     }
   }
 
   disconnect() {
     this.tomSelect.destroy()
   }
 
-  get #inputOptions() {
-    return { render: this.#renderOptions, persist: false, createOnBlur: true, create: true }
+  async load(query, callback) {
+    const response     = await get(this.urlValue, { responseKind: "json", query: { q: query } })
+    const jsonResponse = await response.json
+    callback(jsonResponse)
+  }
+
+  get #inputSettings() {
+    return { render: this.#render, load: (this.hasUrlValue && this.load), persist: false, createOnBlur: true, create: true }
   }
 
-  get #selectOptions() {
-    return { render: this.#renderOptions }
+  get #selectSettings() {
+    return { render: this.#render, load: (this.hasUrlValue && this.load) }
   }
 
-  get #renderOptions() {
+  get #render() {
     return {
       option_create: (data, escape) => {
-        return `<div class="create">${this.createTextValue} <b>${escape(data.input)}</b>...</div>`
+        return `<div class="create">${this.createValue} <b>${escape(data.input)}</b>...</div>`
       },
       no_results: () =>  {
-        return `<div class="no-results">${this.noResultsTextValue}</div>`
+        return `<div class="no-results">${this.noResultsValue}</div>`
       }
     }
   }