Auto Suggestion Input

This component provides an input field along with a dropdown box of suggestions. Typing in the input box will present a list of matching suggestions which can be clicked. When tabbing out, the input text is replaced with the highlighted suggestion. Free text is allowed by entering any text and clicking away from the input box without tabbing. If restrictions on input are desired, it is up to the parent to implement form level validation.



Name Type Default Description
dropdownData array The data to display in the dropdown table
metaData array This defines which attributes are displayed as columns in the dropdown and which attribute value will be displayed in the input box upon selection (showData).

There can be multiple attributes/columns with showData set. The display value will include the concatenated value of each attribute/column with showData set. The order is determined by metaData array.
id String null ‘id’ of the input box
name String null ‘name’ of the input box
dropdownWidth String 100% Width of the dropdown table. eg ‘385px’
value string The value that gets displayed in the input box. Can be set using state
onChange function Callback trigger when the value in input box changes or when selecting a value from dropdown
onBlur function Callback triggered when you ‘blur’ out of the input box or dropdown table
onFocus function Callback triggered when you ‘focus’ on the input box
errorMsg String Error message to display at the bottom of the input box. This should be set only when there is an error. Has class name ‘error-msg’ which gets applied only if error message is present.
noMatchFoundMsg String Message displayed inside the dropdown table when no matches are found for the string typed in the input box
disabled boolean the input box and caret button will be disabled when disabled is turned on
addNewItem Object func key contains function callback that will be triggered when the item is selected. label key contains the name of the new entry eg: ‘Add new Account’

Used by