Add tag filtering for tag autocomplete

app/components/variant_tag_list_input_component/variant_tag_list_input_component.html.haml

@@ -1,4 +1,9 @@
-%div{ "data-controller": "autocomplete", "data-autocomplete-url-value": autocomplete_url }
-  = render tag_list_input_component.new(name: , tags: , placeholder: , aria_label: , only_one: , input_field_data_options: {"data-autocomplete-target": "input"}) do
-    .autocomplete
-      %ul.suggestion-list{ "data-autocomplete-target": "results" }
+%div{ "data-controller": "variant-tag-list-input", "data-variant-tag-list-input-url-value": autocomplete_url }
+  = render tag_list_input_component.new(name:,
+    tags:,
+    placeholder:,
+    aria_label:,
+    only_one:,
+    input_field_data_options: { "data-variant-tag-list-input-target": "input" },
+    hidden_field_data_options: { "data-variant-tag-list-input-target": "tags" }) do
+    %ul.suggestion-list{ "data-variant-tag-list-input-target": "results" }

app/components/variant_tag_list_input_component/variant_tag_list_input_controller.js

@@ -0,0 +1,31 @@
+import { Autocomplete } from "stimulus-autocomplete";
+
+// Extend the stimulus-autocomplete controller, so we can add the ability to filter out existing
+// tag
+export default class extends Autocomplete {
+  static targets = ["tags"];
+
+  replaceResults(html) {
+    const filteredHtml = this.#filterResults(html);
+    super.replaceResults(filteredHtml);
+  }
+
+  //private
+
+  #filterResults(html) {
+    const existingTags = this.tagsTarget.value.split(",");
+    // Parse the HTML
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const lis = doc.getElementsByTagName("li");
+    // Filter
+    let filteredHtml = "";
+    for (let li of lis) {
+      if (!existingTags.includes(li.dataset.autocompleteValue)) {
+        filteredHtml += li.outerHTML;
+      }
+    }
+
+    return filteredHtml;
+  }
+}