🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Select Autocomplete

Selection dropdown with autocomplete.

Copy: View demo

Dependencies

All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us