diff --git a/app/webpacker/controllers/select_variant_controller.js b/app/webpacker/controllers/select_variant_controller.js
new file mode 100644
index 0000000000..778f1717c8
--- /dev/null
+++ b/app/webpacker/controllers/select_variant_controller.js
@@ -0,0 +1,66 @@
+import TomSelectController from "./tom_select_controller";
+
+// This is simalar to the "variantAutocomplete" directive that uses "select2", but it doesn't 
+// have all the same feature
+//
+export default class extends TomSelectController {
+  static values = { options: Object, distributor: Number };
+
+  connect() {
+    const options = {
+      valueField: 'id',
+      searchField: ['name', 'sku'],
+      load: this.#load.bind(this),
+      shouldLoad: (query) => query.length > 2,
+      render: {
+        option: this.#renderOption.bind(this),
+        item: this.#renderItem.bind(this),
+      },
+    };
+    super.connect(options);
+  }
+
+  // private
+
+  #load(query, callback) {
+    const url = '/admin/variants/search.json?q=' + encodeURIComponent(query);
+    fetch(url)
+      .then(response => response.json())
+      .then(json => {
+        callback(json);
+      }).catch((error) => {
+        console.log(error);
+        callback();
+      });
+  }
+
+  #renderOption(variant, escape) {
+    return `<div class='variant-autocomplete-item'>
+        <figure class='variant-image'>
+          ${ variant.image ? `<img src='${variant.image}' />` : "<img src='/noimage/mini.png' />" }
+        </figure>
+        <div class='variant-details'>
+          <h6 class="variant-name">${ escape(variant.name)}</h6>
+          <ul>
+            <li><strong>${ I18n.t('spree.admin.variants.autocomplete.producer_name') }:</strong> ${ escape(variant.producer_name) }</li>
+          </ul>
+          <ul class='variant-data'>
+            <li class='variant-sku'><strong>${ I18n.t('admin.sku') }:</strong> ${ escape(variant.sku)}</li>
+            ${ 
+              variant.on_demand
+                ? `<li class='variant-on_demand'><strong>${I18n.t("on_demand")}</strong></li>`
+                : `<li class='variant-on_hand'>
+                     <strong>${I18n.t("on_hand")}:</strong> ${escape(variant.on_hand)}
+                   </li>`
+            }
+            <li class='variant-options_text'><strong>${ I18n.t('spree.admin.variants.autocomplete.unit') }:</strong> ${ escape(variant.options_text) }</li>
+          </ul>
+        </div>
+      </div>`;
+   }
+
+  #renderItem(variant, escape) {
+    return `<span>${ escape(variant.name) }</span>`
+  }
+}
+