When to use

Use this type of filter when the search field must accept both:

  • type-ahead matching to choose an option from pre-defined set of data; AND
  • free text keywords

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" data-allow-text style="border: none;">
        <label class="label" for="committee_id">Contributor 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-and-free-text.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" data-allow-text style="border: none;">
    <label class="label" for="committee_id">Contributor 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-and-free-text.gif" alt="">
/* No context defined. */
  • Handle: @type-ahead-and-free-text
  • Preview:
  • Filesystem Path: components/02-components/filters/07-search/02-type-ahead-and-free-text/type-ahead-and-free-text.html