Select Autocomplete

Selection dropdown with autocomplete.

Dependencies

• Autocomplete

How to

The Select Autocomplete component is a mix between a <select> element and a text input. The focus on the input triggers a selection dropdown; by typing in the input element, you'll filter the select options.

This component uses the <select> element to create (in JS) the dropdown. It supports optgroup and option elements. If an option hasn't a value, it won't be visible in the dropdown.

<select class="js-select-auto__select">
  <optgroup label="Gryffindor">
    <option>Select option</option> <!-- 👈 not visible in the dropdown -->
    <option value="0">Harry Potter</option>
    <option value="1">Hermione Granger</option>
  </optgroup>

  <optgroup label="Slytherin">
    <option value="2">Draco Malfoy</option>
  </optgroup>
</select>

The dropdown is powered by the Autocomplete component, which allows you to create a reference structure that is filled in JS using the <select> data. You can also create different templates for different result types. In this demo, we've created 3 templates.

<!-- 👇 custom dropdown -->
<div class="autocomplete__results select-auto__results js-autocomplete__results">
  <ul id="autocomplete1" class="autocomplete__list js-autocomplete__list">
    <!-- 👇 template used for optgroup -->
    <li class="select-auto__group-title padding-y-xs padding-x-sm color-contrast-medium is-hidden js-autocomplete__result" data-autocomplete-template="optgroup" role="presentation">
      <span class="text-truncate text-sm" data-autocomplete-label></span>
    </li>

    <!-- 👇 template used for option -->
    <li class="select-auto__option padding-y-xs padding-x-sm is-hidden js-autocomplete__result" data-autocomplete-template="option">
      <span class="is-hidden" data-autocomplete-value></span>
      <div class="text-truncate" data-autocomplete-label></div>
    </li>

    <!-- 👇 template used for no-results message -->
    <li class="select-auto__no-results-msg padding-y-xs padding-x-sm text-truncate is-hidden js-autocomplete__result" data-autocomplete-template="no-results" role="presentation"></li>
  </ul>
</div>

You can customize your templates adding data-attributes to the select options. For example, if you want to show a category for each of your options, use a data-category attribute and add a [data-autocomplete-category] element to your template:

<div class="autocomplete position-relative select-auto js-select-auto js-autocomplete">

  <!-- select -->
  <select class="js-select-auto__select">
    <option>Select option</option>
    <option value="0" data-category="Category 1">Option 1</option>
    <option value="1" data-category="Category 2">Option 2</option>
    <option value="2" data-category="Category 1">Option 3</option>
  </select>

  <!-- input -->
  <div class="select-auto__input-wrapper">
    <!-- input element -->
    <!-- ... -->

    <div class="select-auto__input-icon-wrapper">
      <!-- arrow icon -->
      <!-- ... -->

      <!-- close X icon -->
      <!-- ... -->
    </div>
  </div>

  <!-- dropdown -->
  <div class="autocomplete__results select-auto__results js-autocomplete__results">
    <ul id="autocomplete1" class="autocomplete__list js-autocomplete__list">
      <!-- optgroup template -->
      <!-- ... -->

      <!-- option template - with data category -->
      <li class="select-auto__option padding-y-xs padding-x-sm is-hidden js-autocomplete__result" data-autocomplete-template="option">
        <span class="is-hidden" data-autocomplete-value></span>
        <div class="text-truncate" data-autocomplete-label></div>
        <span data-autocomplete-category></span>
      </li>

      <!-- no-results template -->
      <!-- ... -->
    </ul>
  </div>

  <p class="sr-only" aria-live="polite" aria-atomic="true"><span class="js-autocomplete__aria-results">0</span> results found.</p>
</div>

You can read more about customizing your templates on the Autocomplete info page.

Note: when creating your custom template, make sure you do not remove the span[data-acutocomplete-value] and div[data-autocomplete-label] elements; they are used to store and display option values and labels.

Default Values #

If you want to select one of the options by default, add the selected attribute to that option:

<select class="js-select-auto__select">
  <optgroup label="Gryffindor">
    <option>Select option</option>
    <option value="0" selected>Harry Potter</option> <!-- 👈 this option will be selected by default -->
    <option value="1">Hermione Granger</option>
  </optgroup>

  <optgroup label="Slytherin">
    <option value="2">Draco Malfoy</option>
  </optgroup>
</select>

Selected Value #

Each time an option is selected in the custom dropdown, the native <select> element is updated. This way you can retrive the value of the selected option:

var select = document.getElementsByClassName('js-select-auto__select'); // make sure you are selecting the right <select> element
var value = select[0].value; // e.g., 3

If the native <select> is inside a <form>, its value will be passed on form submission.

Dynamic Content #

If your select component is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the SelectAuto object:

// do this after your content has been added to the page
var selectAutocomplete = document.getElementsByClassName('select-auto')[0]; // your dynamically created select
new SelectAuto(selectAutocomplete);

Make sure to remove the js-select-auto class from the select-auto element so that it is not automatically initialised.

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗