2.8.5 #Components.dropdown.search-with-create-item-action Search with create item action

Toggle example guides Toggle HTML markup

JavaScript is required for:

  • Checking/Unchecking the checkbox on row click
  • Filtering the menu items based on the search input
  • Updating the button text with the number of selected items
  • Highlighting items
  • Executing the create item action
  • Updating the create item text with the search input text

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

Markup 
<div class="sb-form-control">
  <label class="sb-label" for="dropdown-id-search">Select options or create new</label>
  <div class="sb-dropdown sb-dropdown--open" id="dropdown-id-search">
    <div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
      <button class="sb-input" aria-label="One option selected">
       One option selected
      </button>
      <svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
    </div>
    <ul class="sb-dropdown__menu" role="listbox">
      <li class="sb-dropdown__search" role="search">
        <input class="sb-input" id="input-id-1" placeholder="Search here ..." value="er" aria-label="Search">
      </li>
      <li class="sb-dropdown__menu-item sb-dropdown__menu-item--highlighted" tabindex="-1" role="option">
        <div class="sb-checkbox">
          <input type="checkbox" id="checkbox-dropdown-1" class="sb-checkbox__input" tabindex="-1">
          <label class="sb-checkbox__label" for="checkbox-dropdown-1">
            <span class="sb-checkbox__faux">
              <svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
                <path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
              </svg>
            </span>
            <span class="sb-checkbox__text">Netherlands</span>
          </label>
        </div>
      </li>
      <li class="sb-dropdown__menu-item" tabindex="-1" role="option">
        <div class="sb-checkbox">
          <input type="checkbox" id="checkbox-dropdown-2" class="sb-checkbox__input" tabindex="-1" checked>
          <label class="sb-checkbox__label" for="checkbox-dropdown-2">
            <span class="sb-checkbox__faux">
              <svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
                <path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
              </svg>
            </span>
            <span class="sb-checkbox__text">Germany</span>
          </label>
        </div>
      </li>
      <li>
        <button class="sb-dropdown__menu-item sb-dropdown__create-item-action" tabindex="-1">
          <svg class="sb-icon" viewBox="0 0 16 16">
            <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13zM7 6V3H6v3H3v1h3v3h1V7h3V6H7z" />
          </svg>
          Create "er" as new option
        </button>
      </li>
    </ul>
  </div>
</div>
Source: components/_dropdown.scss, line 317