<filter-input>

back edit

Use to filter a list of result. This demo uses Box and Blankslate from Primer CSS.

<div class="Box">
  <div class="Box-header d-flex flex-items-center">
    <strong class="f4">Repositories</strong>
    <filter-input aria-owns="list" class="ml-3 flex-auto">
      <input aria-label="Filter repositories" type="text" class="form-control container-sm width-full">
    </filter-input>
  </div>
  <div id="list">
    <ul class="list-style-none" data-filter-list>
      <li class="Box-row"><a href="#">github/accessibility</a></li>
      <li class="Box-row"><a href="#">github/github</a></li>
      <li class="Box-row"><a href="#">github/remote-input-element</a></li>
      <li class="Box-row"><a href="#">github/web-systems</a></li>
      <li class="Box-row"><a href="#">github/web-systems-documentation</a></li>
    </ul>
    <div class="blankslate" data-filter-empty-state hidden>
      <img src="https://ghicons.github.com/assets/images/light/Code.png" alt="" class="mb-3" />
      <div class="f3 text-bold">No repositories found.</div>
    </div>
  </div>
</div>

Use to filter menu content. This demo uses SelectMenu from Primer CSS.

<details class="details-reset details-overlay">
  <summary class="btn">Repositories <span class="dropdown-caret"></span></summary>
  <details-menu class="SelectMenu SelectMenu--hasFilter">
    <div class="SelectMenu-modal" id="filter-menu">
      <filter-input aria-owns="filter-menu" class="SelectMenu-filter">
        <input autofocus aria-label="Filter repositories" type="text" class="width-full form-control">
      </filter-input>
      <div class="SelectMenu-list" role="menu">
        <div data-filter-list>
          <a role="menuitem" class="SelectMenu-item" href="#">github/accessibility</a>
          <a role="menuitem" class="SelectMenu-item" href="#">
            <span class="flex-auto" data-filter-item-text>github/github</span>
            <span class="Label Label--gray">Default</span>
          </a>
          <a role="menuitem" class="SelectMenu-item" href="#">github/remote-input-element</a>
          <a role="menuitem" class="SelectMenu-item" href="#">github/web-systems</a>
          <a role="menuitem" class="SelectMenu-item" href="#">github/web-systems-documentation</a>
        </div>
        <form action="https://httpbin.org/get" data-filter-new-item hidden>
          <input data-filter-new-item-value name="repository" type="hidden">
          <button type="submit" role="menuitem" class="SelectMenu-item">
            Create "<span data-filter-new-item-text></span>"
          </button>
        </form>
      </div>
      <div class="SelectMenu-footer js-custom-filter-result"></div>
    </div>
  </details-menu>
</details>

Use custom event filter-input-updated to update the footer notice.

document.addEventListener('filter-input-updated', event => {
  const filterInput = event.target
  const {count, total} = event.detail
  document.querySelector('.js-custom-filter-result').textContent = `Showing ${count} out of ${total}`
})