Autocomplete

Import


@import 'settings-tools/all-settings';
@import 'components/c.left-icon-input';
@import 'components/c.text-input';
@import 'components/c.tag';
@import 'components/c.checkbox'; // optional - to be imported when using the multiselection version
@import 'components/c.listbox';
@import 'components/c.autocomplete';

Usage

The creation of an Autocomplete component in your code is done using the following HTML structure:


<div class="mc-autocomplete">
  <!-- Tag -->
  <span id="js-tag" class="mc-tag-removable mc-autocomplete__tag">
    <span id="js-tag-label" class="mc-tag-removable__label">1</span>
    <button class="mc-tag-removable__remove">
      <span class="mc-tag-removable__remove-text">Delete tag</span>
    </button>
  </span>
  <!-- Input -->
  <div class="mc-left-icon-input">
    <svg class="mc-left-icon-input__icon">
      <use xlink:href="#iconS" />
    </svg>
    <input
      id="js-trigger"
      type="search"
      class="mc-left-icon-input__input mc-text-input mc-autocomplete__trigger"
      placeholder="Placeholder"
      autocomplete="off"
      aria-autocomplete="listbox"
      aria-expanded="false"
    />
  </div>
  <!-- Listbox -->
  <ul id="listbox" class="mc-listbox" role="listbox">
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem1"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option1"
      />
      <label for="monoItem1" class="mc-listbox__label">
        Option label n°1
      </label>
    </li>
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem2"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option2"
      />
      <label for="monoItem2" class="mc-listbox__label">
        Option label n°2
      </label>
    </li>
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem3"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option3"
      />
      <label for="monoItem3" class="mc-listbox__label">
        Option label n°3
      </label>
    </li>
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem4"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option4"
      />
      <label for="monoItem4" class="mc-listbox__label">
        Option label n°4
      </label>
    </li>
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem5"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option5"
      />
      <label for="monoItem5" class="mc-listbox__label">
        Option label n°5
      </label>
    </li>
    <li class="mc-listbox__tile" role="option">
      <input
        id="monoItem6"
        type="radio"
        name="monoSelection"
        class="mc-listbox__input"
        value="option6"
      />
      <label for="monoItem6" class="mc-listbox__label">
        Option label n°6
      </label>
    </li>
  </ul>
</div>

Variations

Depending on your use cases, you have the possibility to use the Autocomplete component in its "mono-selection" version or in its "multi-selection" version.

Autocomplte - mono-selection

The Autocomplete component in its "mono-selection" version allows you to select only one value at a time within the listbox.

Autocomplte - multi-selection

The Autocomplete component in its "multi-selection" version allows you to select several values within the listbox.

Information

When using the component with a clear button, you must add the class mc-autocomplete--clearable on the main mc-autocomplete element to ensure that the text field and the clear button are displayed correctly.

States

Invalid

To indicate that the Autocomplete component is in an invalid state, you have to add the is-invalid class to the mc-autocomplete__trigger element.

Disabled

To disable the Autocomplete component you have to add the disabled attribut to the mc-autocomplete__trigger element.

Behaviour

Warning
The autocomplete navigation has to be done using javascript.
The clear button appears only when the users start to type or pick a value.