Typeahead

Typeahead is auto suggestion or completion based on what the user is starting to type, gets refined as the user types more.

Default


With Highlight


With Pills


Typeahead kit is data-driven. The minimum default fields are label and value.

This is an example of an option: { label: 'Windows', value: '#FFA500' }

Rails: Default Options

You can also pass default_options which will populate the initial pill selections:

default_options: [{ label: 'Windows', value: '#FFA500' }]

Rails: Subscribing to JS Events

JavaScript events are triggered based on actions you take within the kit such as selection, removal and clearing.
This kit utilizes a default id prop named react-select-input. It is highly advised to send your own unique id prop when using this kit to ensure these events do not unintentionally affect other instances of the kit in the same view. The examples below will use the unique id prop named typeahead-pills-example1:

pb-typeahead-kit-typeahead-pills-example1-result-option-select event to perform custom work when an option is clicked.
pb-typeahead-kit-typeahead-pills-example1-result-option-remove event to perform custom work when a pill is clicked.
pb-typeahead-kit-typeahead-pills-example1-result-option-clear event to perform custom work when all pills are removed upon clicking the X.

Rails: Publishing JS Events

The same rule regarding the id prop applies to publishing JS events. The examples below will use the unique id prop named typeahead-pills-example1:

pb-typeahead-kit-typeahead-pills-example1:clear event to clear all options.

With Pills (Async Data)


Rails: Providing the load_options Promise

*Additional required props: * async: true, pills: true

The prop load_options, when used in conjunction with async: true and pills: true, points to a JavaScript function located within the global window namespace. This function should return a Promise which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.

React

loadOptions

*Additional required props: * async: true

As outlined in the react-select Async docs, loadOptions expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.

getOptionLabel + getOptionValue

If your server returns data that requires differing field names other than label and value

See react-select docs for more information: https://react-select.com/advanced#replacing-builtins

With Pills (Async Data w/ Users)


If the data field imageUrl is present, FormPill will receive that field as a prop and display the image.

With Pills (Async Data w/ Custom Options)


Use valueComponent props to pass your desire custom options. valueComponent will be displayed if present.

Inline


Multi Kit Options


Createable


Createable (+ Async Data)


Error State


Typeahead w/ Error shows that an option must be selected or the selected option is invalid (i.e., when used in a form it signals a user to fix an error).


Things to Avoid

Avoid using on questionaires, surverys, text input and textarea when users answers/inputs will be individualized.

Available Props