@comparaonline/ui-autocomplete-textfield
Installation
yarn add @comparaonline/ui-autocomplete-textfield
Usage
const items = [{
label: "item1",
value: 1
}, {
label: "item2",
value: 2
}];
<AutoCompleteTextField
items={items}
getItemLabel={item => item.label}
getItemValue={item => item.value}
textFieldProps={{
fullWidth: true,
label: 'Select car model',
variant: 'outlined'
}}
suggestionProps={{
noResultsText: 'No results',
maxDisplayedItems: 10
}}
/>
Component Props
name | type | required | description |
---|
items | any | true | list of items to display |
getItemLabel | function: item => string | true | receive an item an return its label |
getItemValue | function: item => string | true | receive an item an return its value |
suggestionProps | object | true | autocomplete configuration |
textFieldProps | object | false | props used by material-ui Textfield |
searchOptions | object | false | configuration options used by fuse.js |
suggestionProps
name | type | required | default | description |
---|
noResultsText | string | true | | text to display when there are not suggestions |
maxDisplayedItems | number | false | 5 | max number of suggestions to display |