Pod Point UI Toolkit

Typeahead

Required files

SCSS files required: _components.typeahead.scss

SCSS files optional: _objects.typeahead-group.scss

JS files required: typeahead.js

Typeahead structure

The Typeahead element uses the feature rich choices.js library to wrap an ordinary select dropdown.

A Typeahead element is created using an existing select and the Typeahead js module data-js-module="typeahead".

A Typeahead element options are defined by the data-options attribute, which accepts a JSON string of options, where value is the value of the option, label is what is displayed and customProperties.description is what is searchable.

A Typeahead element default option is defined by the data-default attribute, which accepts the value of one of your JSON options.

You can also specify the css classes to style the container, selected and dropdown elements via the data-container-class, data-selected-class and data-dropdown-class attributes.

By default the classes .typeahead .form__field, .form__control and .typeahead__list .typeahead__list--dropdown .form__control will be applied, respectively.

<select data-js-module="typeahead"
    data-default="1"
    data-options='[
      {
        "value": "1",
        "label": "One",
        "customProperties": {
          "description": "One"
        }
      },
      {
        "value": "2",
        "label": "Two",
        "customProperties": {
          "description": "Two"
        }
      }
    ]'>
</select>

Default Select

Select

Select - disabled

Select - valid

Select - invalid This is an error message.

Grouped Inputs Widget

You can place a select and an input into a div with the class .typeahead-group to create a grouped inputs widget, which is particularly useful for telephone number and currency selection fields.

Note: you must include the _objects.typeahead-group.scss file.

Phone Number

Markup Only

If you would like to run the component using your own javascript, but would like to use the markup and css available in the UI Toolkit, simply copy the below markup in your code:

<div class="typeahead form__field">
    <div class="form__control">
        <select class="typeahead__select">
            <option value="1" selected></option>
        </select>

        <div class="typeahead__list typeahead__list--single">
            <div class="typeahead__item typeahead__item--selectable">
                One
            </div>
        </div>
    </div>

    <div class="typeahead__list typeahead__list--dropdown form__control">
        <input class="typeahead__input" type="text" placeholder="Search">

        <div class="typeahead__list">
            <div class="typeahead__item typeahead__item--selectable" data-value="1">
                One
            </div>

            <div class="typeahead__item typeahead__item--selectable" data-value="2">
                Two
            </div>
        </div>
    </div>
</div>

Select

One

Phone Number

🇬🇧 United Kingdom (+44)

To show the options dropdown, you can add the .is-active class to the div element with class .typeahead__list .typeahead__list--dropdown.

Select

One

Phone Number

🇬🇧 United Kingdom (+44)

Remember, in order to work with a form submit, your javascript must set the selected option into the select element.

Autocomplete

You can use a variation of the typeahead to create an autocomplete style component by taking the input element out of the typeahead list and removing the .typeahead__input class from it to prevent the overriding of the default form control styles.

Autocomplete