When to use

  • When the search field only accepts type-ahead matching to choose an option from a pre-defined set of data

GitHub issues

<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
    <div class="filter js-filter typeahead-filter" data-filter="typeahead" data-name="committee_id" id="committee_id-field" style="border: none;">
        <label class="label" for="committee_id">Recipient name or ID</label>
        <div class="combo combo--search--mini filter__typeahead">
            <input id="committee_id" type="text" class="combo__input tt-input" tabindex="0" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
            <button class="combo__button button--search button--standard is-disabled" type="button" tabindex="-1">
                <span class="u-visually-hidden">Search</span>
            </button>
        </div>
    </div>
</div>

<br>

<img src="/components/type-ahead-only.gif" alt="">
<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
  <div class="filter js-filter typeahead-filter" data-filter="typeahead" data-name="committee_id" id="committee_id-field" style="border: none;">
    <label class="label" for="committee_id">Recipient name or ID</label>
    <div class="combo combo--search--mini filter__typeahead">
      <input id="committee_id" type="text" class="combo__input tt-input" tabindex="0" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
      <button class="combo__button button--search button--standard is-disabled" type="button" tabindex="-1">
        <span class="u-visually-hidden">Search</span>
      </button>
    </div>
  </div>
</div>

<br>

<img src="/components/type-ahead-only.gif" alt="">
/* No context defined. */
  • Handle: @type-ahead-only
  • Preview:
  • Filesystem Path: components/02-components/filters/07-search/01-type-ahead-only/type-ahead-only.html