Styleguides

Shared Assets & Docs

Menu

Typeahead is a fast and fully-featured autocomplete library by Twitter.

We have a version that is styled to match our look. To use, include typeahead.js and typeahed.css from our shared assets host.

Standard Typeahead

Check out the official documentation for how to use it.

<input type="text" class="typeahead">
<script>
  $(function() {
    $('.typeahead').typeahead({name: 'states', local: ['Alabama', '...']});
  });
</script>

Typeahead with Headers

Use .tt-header with the header option to get nice looking headers.

<input type="text" class="typeahead">
<script>
  $(function() {
    $('.typeahead').typeahead([
      {
        name: 'popular-states',
        local: ['Alabama', '...'],
        header: '<h3 class="tt-header">Popular States</h3>'
      },
      {
        name: 'all-states',
        local: ['Alabama', '...'],
        header: '<h3 class="tt-header">All Stsates</h3>'
      }
    ]);
  });
</script>

Typeahead with Initial Suggestions

Setup a typeahead component with initial suggestions that appear on focus by using our custom typeahead-intial.js plugin.

<input type="text" class="typeahead">
<script>
  $(function() {
    $('.typeahead')
      .typeahead({
        name: 'all-states',
        local: ['Alabama', '...']
      })
      .typeaheadInitial({
        name: 'popular-states',
        local: ['Alabama', '...'],
        header: '<h3 class="tt-header">Popular States</h3>'
      });
    ]);
  });
</script>

Style Variations

The typeahead component automatically picks up the styles from .gray-form and .underlined-form.

<form class="form gray-form">
  <div class="field">
    <div class="field-input">
      <input type="text" class="typeahead">
    </div> <!-- .field-input -->
  </div> <!-- .field -->
</form> <!-- .form -->
<form class="form underlined-form">
  <div class="field">
    <div class="field-input">
      <input type="text" class="typeahead">
    </div> <!-- .field-input -->
  </div> <!-- .field -->
</form> <!-- .form -->
<script>
  $(function() {
    $('.typeahead')
      .typeahead({
        name: 'all-states',
        local: ['Alabama', '...']
      })
      .typeaheadInitial({
        name: 'popular-states',
        local: ['Alabama', '...'],
        header: '<h3 class="tt-header">Popular States</h3>'
      });
    ]);
  });
</script>