<div class="repairs-autocomplete">
    <div class="search-standalone js-search-standalone u-page-width-max-gutters">

        <form class="search-standalone-form">
            <label for="" class="label">Type in your style number or name</label>

            <input class="search-standalone-form__input js-search-standalone-input" type="text" placeholder="">
            <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Clear</span>
      <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </button>
        </form>
    </div>

    <div class="repairs-autocomplete__results js-repairs-autocomplete-results">
        <div class="repairs-autocomplete__product">
            <ul class="repairs-autocomplete__product-list">
                <li class="repairs-autocomplete__variant" href="#">
                    <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$">
                    <div class="repairs-autocomplete__variant-info">
                        <span class="repairs-autocomplete__variant-name">PEAHI</span>
                        <span class="repairs-autocomplete__variant-id">202-02</span>
                    </div>
                </li>
                <li class="repairs-autocomplete__variant" href="#">
                    <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$">
                    <div class="repairs-autocomplete__variant-info">
                        <span class="repairs-autocomplete__variant-name">PEAHI</span>
                        <span class="repairs-autocomplete__variant-id">B202-2M</span>
                    </div>
                </li>
                <li class="repairs-autocomplete__variant" href="#">
                    <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$">
                    <div class="repairs-autocomplete__variant-info">
                        <span class="repairs-autocomplete__variant-name">PEAHI</span>
                        <span class="repairs-autocomplete__variant-id">H202-10</span>
                    </div>
                </li>
                <li class="repairs-autocomplete__variant" href="#">
                    <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$">
                    <div class="repairs-autocomplete__variant-info">
                        <span class="repairs-autocomplete__variant-name">PEAHI</span>
                        <span class="repairs-autocomplete__variant-id">H202-2M</span>
                    </div>
                </li>
                <li class="repairs-autocomplete__variant" href="#">
                    <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$">
                    <div class="repairs-autocomplete__variant-info">
                        <span class="repairs-autocomplete__variant-name">PEAHI</span>
                        <span class="repairs-autocomplete__variant-id">H202-70</span>
                    </div>
                </li>
                <li class="repairs-autocomplete__variant" href="#">
                    <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$">
                    <div class="repairs-autocomplete__variant-info">
                        <span class="repairs-autocomplete__variant-name">PEAHI</span>
                        <span class="repairs-autocomplete__variant-id">HT202-71</span>
                    </div>
                </li>
                <li class="repairs-autocomplete__variant" href="#">
                    <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$">
                    <div class="repairs-autocomplete__variant-info">
                        <span class="repairs-autocomplete__variant-name">PEAHI</span>
                        <span class="repairs-autocomplete__variant-id">H202-2M-2</span>
                    </div>
                </li>
                <li class="repairs-autocomplete__variant" href="#">
                    <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$">
                    <div class="repairs-autocomplete__variant-info">
                        <span class="repairs-autocomplete__variant-name">PEAHI</span>
                        <span class="repairs-autocomplete__variant-id">H202-70-2</span>
                    </div>
                </li>
                <li class="repairs-autocomplete__variant" href="#">
                    <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$">
                    <div class="repairs-autocomplete__variant-info">
                        <span class="repairs-autocomplete__variant-name">PEAHI</span>
                        <span class="repairs-autocomplete__variant-id">HT202-71-2</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="repairs-autocomplete">
  {{#each components}}
  {{render (dynamicComponent component) this merge=true}}
  {{/each}}
  <div class="repairs-autocomplete__results js-repairs-autocomplete-results">
    {{#each products}}
    <div class="repairs-autocomplete__product">
      <ul class="repairs-autocomplete__product-list">
        {{#each variants}}
        {{> @repairs-autocomplete-variant product=../this variant=this url='#'}}
        {{/each}}
      </ul>
    </div>
    {{/each}}
  </div>
</div>
{
  "components": [
    {
      "component": "search-standalone",
      "title": null,
      "placeholder": null,
      "label": "Type in your style number or name"
    }
  ],
  "products": [
    {
      "name": "PEAHI",
      "summary": "Polarized men's classic sunglasses",
      "description": "Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.",
      "category": "Wrap",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-full",
        "star-empty"
      ],
      "vip": null,
      "tax": "Inkl. MWST",
      "variants": [
        {
          "id": "202-02",
          "name": "Gloss Black",
          "color": "#000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$149.00",
          "salePrice": "$229.00",
          "url": "#202-02",
          "status": "New",
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "202-02",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "B202-2M",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$189.00",
          "salePrice": "$219.00",
          "url": "#B202-2M",
          "status": null,
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "B202-2M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-10",
          "name": "Dark Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-10",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-10",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-2M",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-2M",
          "status": "New",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-2M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-70",
          "name": "Redfish",
          "color": "#7d4a07",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-70",
          "status": "New",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-70",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "HT202-71",
          "name": "MahiMahi",
          "color": "#218b16",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HT202-71",
          "status": null,
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "HT202-71",
            "inactive": true,
            "material": "mauipure"
          }
        },
        {
          "id": "H202-2M-2",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-2M-2",
          "status": null,
          "stock": "Out of Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-2M-2",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-70-2",
          "name": "Redfish",
          "color": "#7d4a07",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-70-2",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-70-2",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "HT202-71-2",
          "name": "MahiMahi",
          "color": "#218b16",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HT202-71-2",
          "status": null,
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "HT202-71-2",
            "inactive": true,
            "material": "mauipure"
          }
        }
      ],
      "callToAction": null,
      "mauijim": true,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const resultsActiveClass = 'js-repairs-autocomplete-results--active';
      const resultsVariantClass = '.repairs-autocomplete__variant';
      const resultsClass = '.js-repairs-autocomplete-results';
      const searchClass = '.js-search-standalone';
      const searchInputClass = '.repairs-autocomplete .js-search-standalone-input';
    
      function handleSearchInputChange(e) {
        const body = document.querySelector('body');
        const results = e.target.closest(searchClass).nextElementSibling;
        const variants = results.querySelectorAll(resultsVariantClass);
    
        if (body) {
          body.addEventListener('click', handleBodyClick);
        }
    
        if (!results.classList.contains(resultsActiveClass) && variants.length > 0) {
          results.classList.add(resultsActiveClass);
        }
        else if (e.target.value === '' && body) {
          results.classList.remove(resultsActiveClass);
          body.removeEventListener('click', handleBodyClick);
        }
      }
    
      function handleBodyClick(e) {
        const body = document.querySelector('body');
    
        if (!e.target.closest(resultsVariantClass) && body) {
          const results = document.querySelector(resultsClass);
    
          results.classList.remove(resultsActiveClass);
          body.removeEventListener('click', handleBodyClick);
        }
      }
    
      function init() {
        const searchInput = document.querySelector(searchInputClass);
    
        if (searchInput) {
          searchInput.addEventListener('input', handleSearchInputChange);
        }
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/repairs-autocomplete/repairs-autocomplete.js
  • Filesystem Path: src/components/01-elements/forms/repairs-autocomplete/repairs-autocomplete.js
  • Size: 1.5 KB
  • Content:
    .repairs-autocomplete {
      position: relative;
    
      .search-standalone {
        margin-right: 0;
        margin-left: 0;
      }
    
      .search-standalone-form {
        width: 100%;
        max-width: 444px;
      }
    
      .search-standalone-form__input {
        min-height: 50px;
        line-height: 48px;
      }
    
      .search-standalone-form__button {
        width: 50px;
        height: 50px;
      }
    
      @include breakpoint($breakpoint-md) {
        width: 444px;
      }
    }
    
    .repairs-autocomplete__results {
      display: none;
      position: absolute;
      top: 100%;
      width: 100%;
      background: $color-white;
      z-index: 10;
    
      // Overrides inline styles added to the widget used in Hybris, which might not
      // have the .repairs-autocomplete__product class on the ul element.
      ul {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
    }
    
    .js-repairs-autocomplete-results--active {
      display: block;
    }
    
    // Aside from being useful as currently used, this is a wrapper in case we
    // need to distinguish one PRODUCT (as opposed to one VARIANT from another).
    .repairs-autocomplete__product {
      padding: 0 $gutter-width / 2;
      border-width: 0 1px;
      border-style: solid;
      border-color: $color-medium-dark;
    
      &:last-child {
        border-bottom-width: 1px;
    
        .repairs-autocomplete__variant:last-child {
          border-bottom-style: none;
        }
      }
    }
    
  • URL: /components/raw/repairs-autocomplete/repairs-autocomplete.scss
  • Filesystem Path: src/components/01-elements/forms/repairs-autocomplete/repairs-autocomplete.scss
  • Size: 1.4 KB

The repairs-autocomplete.js script belonging to this component only tries to efficiently show and hide a div (on input changes and blur respectively).

As the list of results will not be displayed if there are no child elements present with the class .results-autocomplete__variant, it can be used with a script that populates the result, modified with code that populates the results, or not used at all.