openfoodnetwork/app/webpacker/controllers/select_variant_controller.js

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>`
  }
}