@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