Stylabilla

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

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+

Select options or create new

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 viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
        <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
      </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-text--milo sb-dropdown__menu-item sb-text--milo--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 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Netherlands</span>
          </label>
        </div>
      </li>
      <li class="sb-dropdown__menu-item sb-text--milo" 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 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Germany</span>
          </label>
        </div>
      </li>
      <li>
        <button class="sb-dropdown__menu-item sb-text--milo 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 347