Client side filtering

back edit

Use inside of <details-menu>. This demo uses SelectMenu from Primer CSS.

<details class="details-reset details-overlay">
  <summary class="btn">Robots <span class="dropdown-caret"></span></summary>
  <details-menu class="SelectMenu SelectMenu--hasFilter">
    <div class="SelectMenu-modal">
      <div class="SelectMenu-filter">
        <input type="text" autofocus
          class="SelectMenu-input form-control js-filterable-field"
          aria-label="Search robots"
          id="input">
      </div>
      <div class="SelectMenu-list" role="menu" data-filterable-for="input" data-filterable-type="substring">
        <button type="button" class="SelectMenu-item" role="menuitem">Hubot</button>
        <button type="button" class="SelectMenu-item" role="menuitem">R2-D2</button>
        <button type="button" class="SelectMenu-item" role="menuitem">Bender</button>
        <button type="button" class="SelectMenu-item" role="menuitem">WALL-E</button>
        <button type="button" class="SelectMenu-item" role="menuitem">BB-8</button>
      </div>
    </div>
  </details-menu>
</details>

Empty state (.select-menu-no-results) currently only works with SelectMenu (deprecated) from Primer CSS.

<details class="details-reset details-overlay">
  <summary class="btn">Robots <span class="dropdown-caret"></span></summary>
  <details-menu class="select-menu-modal position-absolute" style="z-index: 99;">
    <div class="select-menu-filters">
      <div class="select-menu-text-filter">
        <input type="text" autofocus
          class="form-control js-filterable-field"
          aria-label="Search robots"
          id="input2">
      </div>
    </div>
    <div class="select-menu-list" role="menu" data-filterable-for="input2" data-filterable-type="substring">
      <button type="button" class="SelectMenu-item" role="menuitem">Hubot</button>
      <button type="button" class="SelectMenu-item" role="menuitem">R2-D2</button>
      <button type="button" class="SelectMenu-item" role="menuitem">Bender</button>
      <button type="button" class="SelectMenu-item" role="menuitem">WALL-E</button>
      <button type="button" class="SelectMenu-item" role="menuitem">BB-8</button>
      <div class="select-menu-no-results">No results found.</div>
    </div>
  </details-menu>
</details>

Use outside of menus.

<div class="Box">
  <label class="Box-header d-block">
    Filter robots
    <input type="text"
      class="form-control js-filterable-field ml-2"
      id="input3">
  </label>
  <div data-filterable-for="input3" data-filterable-type="substring">
    <a href="#" class="d-block Box-row">Hubot</a>
    <a href="#" class="d-block Box-row">R2-D2</a>
    <a href="#" class="d-block Box-row">Bender</a>
    <a href="#" class="d-block Box-row">WALL-E</a>
    <a href="#" class="d-block Box-row">BB-8</a>
  </div>
</div>