From e32c1af1f3b2794cc58e4ca6dfffaa3f3fdabb2a Mon Sep 17 00:00:00 2001
From: Theodor Vararu <theo@vararu.org>
Date: Fri, 27 Sep 2024 14:03:52 +0300
Subject: [PATCH] Add autocomplete stimulus controller

This allows us to specify `data-module="autocomplete"` on a `<select>`
element to enhance it to an autocompleteapp/javascript/controllers/autocomplete_controller.js.
---
 .../controllers/autocomplete_controller.js    | 60 +++++++++++++++++++
 app/javascript/controllers/index.js           |  3 +
 2 files changed, 63 insertions(+)
 create mode 100644 app/javascript/controllers/autocomplete_controller.js

diff --git a/app/javascript/controllers/autocomplete_controller.js b/app/javascript/controllers/autocomplete_controller.js
new file mode 100644
index 000000000..5ddf32d70
--- /dev/null
+++ b/app/javascript/controllers/autocomplete_controller.js
@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus";
+import accessibleAutocomplete from "accessible-autocomplete";
+
+const enhanceOption = (option) => {
+  return {
+    name: option.label,
+    append: option.getAttribute("data-append"),
+    hint: option.getAttribute("data-hint"),
+  };
+};
+
+const suggestion = (value, options) => {
+  const option = options.find(({ name }) => name === value);
+  if (option) {
+    const html = option.append ? `${value} – ${option.append}` : value;
+    return option.hint
+      ? `${html}<br><span class="autocomplete__option-hint">${option.hint}</span>`
+      : html;
+  } else {
+    return "No results found";
+  }
+};
+
+const autocomplete = ($module) => {
+  if (!$module) {
+    return;
+  }
+
+  const params = $module.dataset;
+
+  const selectOptions = Array.from($module.options);
+  const options = selectOptions.map((option) => enhanceOption(option));
+
+  accessibleAutocomplete.enhanceSelectElement({
+    autoselect: params.autoselect === "true",
+    defaultValue: params.defaultValue || "",
+    displayMenu: params.displayMenu,
+    minLength: params.minLength ? parseInt(params.minLength) : 0,
+    selectElement: $module,
+    showAllValues: params.showAllValues === "true",
+    showNoOptionsFound: params.showNoOptionsFound === "true",
+    templates: {
+      suggestion: (value) => suggestion(value, options),
+    },
+    onConfirm: (value) => {
+      const selectedOption = [].filter.call(
+        selectOptions,
+        (option) => (option.textContent || option.innerText) === value,
+      )[0];
+      if (selectedOption) selectedOption.selected = true;
+    },
+  });
+};
+
+// Connects to data-module="autocomplete"
+export default class extends Controller {
+  connect() {
+    autocomplete(this.element);
+  }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index b43fa97c8..b3b849730 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -4,6 +4,9 @@
 
 import { application } from "./application";
 
+import AutocompleteController from "./autocomplete_controller";
+application.register("autocomplete", AutocompleteController);
+
 import AutosubmitController from "./autosubmit_controller";
 application.register("autosubmit", AutosubmitController);