Filterable input filters a list of results or options as the user types.
Example
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| autoFillInputValue | bool | - | false | React component that renders a suggestion field |
| ActionField | func | - | (props) => <span { ...props } /> | React component that renders an action field |
| InputField | func | - | Input |
If true, when suggestion is selected, input value is
updated to suggestion value |
| SuggestionField | func | - | Suggestion | React component that renders an input field |
| debounce | number | - | 200 | Sets the debounce time (ms) |
| filterBy | func | - | (x) => x |
Function that takes a single suggestion
and returns a value for a query to match |
| maxHeight | number | - | 200 | Sets the maximum height of the suggestions list |
| onActionClick | func | - | () => {} | Function that is called when the action field is clicked |
| onInputChange | func | - | () => {} | Function that is called when the input field changes its value |
| onSuggestionClick | func | - | () => {} | Function that is called when a suggestion is clicked |
| placeholder | string | - | '' | Placeholder text of input field |
| stateful | bool | - | true | Determines if the list of suggestions should be managed internally |
| suggestions | array | - | [] |
List of suggestions
TODO: make suggestions an instance of Immutable.List |
| testSection | string | - | '' | Hook for automated JavaScript tests |
| value | string | - | '' | Default Input value |
Usage
Input (Filterable) presents the user with an input field and corresponding dropdown list that may contain a value or values that have been predetermined. The predetermined values may be user generated, or generated by our application.
Initial contents
Instead of an empty list, provide helpful shortcuts for the dropdown list like recent or popular items.
Filter as you type
A dropdown list appears as the user types, and contains a limited set of results based on the current input value.
Allowing adding of items
By default, the component only shows items that are selectable, without providing any means to add to the list. Optionally, you may provide an action field to allow the user to add items to the list.
Best Practices
Do
Allow filtering as you type, avoid "Apply" or "Submit" buttons.
If the list of items can be managed by the user elsewhere in the application, provide an "Add Item" action.
Don't
Don't show an empty list initially. Populate with items the user may want.