Select: Search With Fallback

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="select select--search">
    <label class="
            label
            
        " for="field-id">
        Label text
    </label>
    <select id="field-id" class="select__field " name="field-name">
        <option class="" value="option1">
            Option 1
        </option>
        <option class="" value="option2">
            Option 2
        </option>
        <option class="" value="option3" disabled>
            Option 3
        </option>
        <option class="" value="option4" data-option="fallback">
            Other
        </option>
    </select>
</div>

<script src="/components/raw/select/select.js"></script>


        <div class="select {{ class }}" {{{ attributes }}}>
    <label
        class="
            label
            {{ label.class }}
        "
        for="{{ field.id }}"
        {{{ label.attributes }}}
    >
        {{ label.text }}
    </label>
    <select
        id="{{ field.id }}"
        class="select__field {{ field.class }}"
        name="{{ field.name }}"
        {{{ field.attributes }}}
    >
        {{#each options}}
            <option
                class="{{ class }}"
                value="{{ value }}"
                {{{ attributes }}}
            >
                {{text}}
            </option>
        {{/each}}
    </select>
</div>

{{#if script}}
    <script src="{{ static 'select.js' }}"></script>
{{/if}}


        
            
            {
  "script": true,
  "label": {
    "attributes": "",
    "text": "Label text"
  },
  "field": {
    "id": "field-id",
    "name": "field-name",
    "class": "",
    "attributes": ""
  },
  "options": [
    {
      "value": "option1",
      "text": "Option 1"
    },
    {
      "value": "option2",
      "text": "Option 2"
    },
    {
      "value": "option3",
      "text": "Option 3",
      "attributes": "disabled"
    },
    {
      "value": "option4",
      "text": "Other",
      "attributes": "data-option=\"fallback\""
    }
  ],
  "class": "select--search"
}

File:

Content:


                                $select__margin-bottom                   : $spacer--medium !default;
$select__padding                         : 0 $spacer--extra-large 0 $spacer--medium !default;
$select__border                          : $form-elements-border !default;
$select__height                          : 48px !default;
$select__min-width                       : 72px !default;
$select__border-radius                   : $form-elements-radius !default;
$select__line-height                     : $select__height !default;
$select__font-family                     : $font-family-base !default;
$select__field-background                : $white !default;
$select__field-color                     : $font-color-base !default;
$select__field-font-size                 : $font-size-base !default;
$select__label-color-focus               : $color-primary !default;
$select__transition                      : $transition-base !default;
$select__background-disabled             : $gray-light !default;
$select__white-space--inline             : nowrap !default;

$select__label-margin--inline            : 0 $spacer--medium 0 0 !default;

//native
$select__field-bg-image--native          : url('../images/icons/expand-down.svg') !default;
$select__field-bg-repeat--native         : no-repeat !default;
$select__field-bg-position--native       : calc(100% - #{$spacer}) center !default;

// Select 2
$select__option-list-shadow              : none !default;
$select__border-radius                   : 0 !default;
$select__field-padding                   : 0 $spacer--extra-large 0 $spacer--medium !default;
$select__arrow-position-top              : 0 !default;
$select__arrow-position-right            : $spacer--small !default;
$select__arrow-padding                   : $spacer--extra-small !default;
$select__arrow-bg-color                  : $color-primary !default;
$select__arrow-border-width              : 0 2px 2px 0 !default;
$select__arrow-margin-top                : -7px !default;
$select__arrow-transform                 : rotate(45deg) !default;
$select__arrow-transform--open           : rotate(225deg) !default;
$select__arrow-transition                : $transition-base !default;
$select__option-padding                  : 0 $spacer--medium !default;
$select__option-font-size                : $font-size-base !default;
$select__option-color--highlighted       : $color-primary !default;
$select__option-bg-color--highlighted    : $gray-light !default;
$select__option-selected-bg              : $white !default;
$select__option-overflow                 : hidden !default;
$select__option-text-overflow            : ellipsis !default;
$select__option-white-space              : nowrap !default;
$select__dropdown-border-width           : 0 1px 1px 1px !default;

URL: /components/raw/select/_select-variables.scss
Filesystem Path: build/components/Molecules/form/select/_select-variables.scss
Size: 2.8 KB

Content:


                                @import 'select-variables';

.select {
    margin-bottom: $select__margin-bottom;

    &:focus-within {
        .label {
            color: $select__label-color-focus;
        }
    }

    &--native {
        select {
            position: relative;
            width: 100%;
            min-width: $select__min-width;
            height: $select__height;
            padding: $select__padding;
            border: $select__border;
            border-radius: $select__border-radius;
            appearance: none;
            transition: $select__transition;
            font-family: $select__font-family;
            line-height: $select__line-height;
            font-size: $select__field-font-size;
            background: $select__field-background;
            background-image: $select__field-bg-image--native;
            background-repeat: $select__field-bg-repeat--native;
            background-position: $select__field-bg-position--native;
            cursor: pointer;

            &:disabled {
                background-color: $select__background-disabled;
                cursor: not-allowed;
            }

            &.focus-visible {
                @include focus-input();
            }

            &.mage-error {
                border-color: $input__error-color;
            }
        }
    }


    &--multi {
        .select__field {
            width: 100%;
            height: auto;
        }
        option {
            display: flex;
            align-items: center;
            height: $select__height;
            line-height: $select__line-height;
            font-size: $select__field-font-size;

            &:hover,
            &:focus {
                background-color: $select__option-bg-color--highlighted;
                color: $select__option-color--highlighted;
            }
        }
    }

    &--inline {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

    &--with-button {
        @include mq($screen-m) {
            display: flex;
            align-items: center;
        }
    }

    &--inline,
    &--with-button {
        .label {
            margin: $select__label-margin--inline;
            white-space: $select__white-space--inline;
        }
    }

    &--grid {
        display: grid;
    }

    &__button {
        flex-shrink: 0;
        margin: $spacer--medium 0 0;

        @include mq($screen-m) {
            margin: 0 0 0 $spacer--medium;
        }
    }

    &__field {
        position: relative;
        height: $select__height;
        padding: $select__padding;
        line-height: $select__line-height;
        font-size: $select__field-font-size;
        cursor: pointer;
        border: $select__border;
        border-radius: $select__border-radius;
        background: $select__field-background;
        appearance: none;

        &:disabled {
            background-color: $select__background-disabled;
            cursor: not-allowed;
        }

        &.focus-visible {
            @include focus-input();
        }
    }

    &__field-list {
        &--single {
            height: $select__height;
            padding: 0;
            border: $select__border;
            border-radius: $select__border-radius;
            line-height: $select__line-height;
        }
    }

    &__field-input {
        transition: $select__transition;

        &:focus {
            outline: $outline-base;
        }
    }
}

// select2 overwrite styles
.select2-hidden-accessible {
    & + .mage-error {
        order: 1;
    }
}

.select2 {
    width: 100%;
}
.select2-container {
    .select2-selection--single {
        height: $select__height;
        width: 100%;
        border: $select__border;
        border-radius: $select__border-radius;

        .select2-selection__rendered {
            width: 100%;
            padding: $select__field-padding;
            line-height: $select__height;
            color: $select__field-color;
        }

        .select2-selection__arrow {
            height: $select__height;
            top: $select__arrow-position-top;
            right: $select__arrow-position-right;
            b {
                padding: $select__arrow-padding;
                border-color: $select__arrow-bg-color;
                border-width: $select__arrow-border-width;
                margin-top: $select__arrow-margin-top;
                pointer-events: none;
                transform: $select__arrow-transform;
                transition: $select__arrow-transition;
            }
        }
    }
    &.select2-container--open {
        .select2-selection--single {
            @include focus-input();
            .select2-selection__arrow b {
                border-color: $select__arrow-bg-color;
                border-width: $select__arrow-border-width;
                transform: $select__arrow-transform--open;
                margin-top: 0;
            }
        }
    }

    .select2-results {
        &__options {
            max-height: 300px;
        }

        &__option {
            position: relative;
            height: $select__height;
            line-height: $select__height;
            padding: $select__option-padding;
            font-size: $select__option-font-size;
            overflow: $select__option-overflow;
            text-overflow: $select__option-text-overflow;
            white-space: $select__option-white-space;

            &[aria-selected=true] {
                background-color: $select__option-selected-bg;
            }

            &--highlighted[aria-selected] {
                background-color: $select__option-bg-color--highlighted;
                color: $select__option-color--highlighted;
            }
        }
    }

    .select2-dropdown {
        border: $select__border;
        border-radius: $select__border-radius;
        border-width: $select__dropdown-border-width;
        box-shadow: $select__option-list-shadow;
    }
}

URL: /components/raw/select/_select.scss
Filesystem Path: build/components/Molecules/form/select/_select.scss
Size: 5.9 KB

Content:


                                /* global $ */
'use strict';
$(document).ready(function selectTwo() {
  const elem = $('.select__field');
  const isSearchable = $('.select').hasClass('select--search');

  function matchCustom(params, data) {
    if ($(data.element).data('option') === 'fallback') {
      return data;
    }

    if ($.trim(params.term) === '') {
      return data;
    }

    if (typeof data.text === 'undefined') {
      return null;
    }

    if (data.text.toLowerCase().indexOf(params.term.toLowerCase()) > -1) {
      return data;
    }

    return null;
  }

  const config = {
    minimumResultsForSearch: Infinity,
    width: null,
    position: 'bottom',
  };

  if (isSearchable) {
    config.minimumResultsForSearch = undefined;
    config.dropdownCssClass = 'select-dropdown--search';
    config.matcher = matchCustom;
  }

  elem.select2(config);
});

URL: /components/raw/select/select.js
Filesystem Path: build/components/Molecules/form/select/select.js
Size: 849 Bytes

Handle: @select--search-(with-fallback)
Preview:
- With layout
- Component only
Filesystem Path: build/components/Molecules/form/select/select.hbs

No notes defined.