Fetch Autocomplete Field

Displaying an autocomplete field with an the request handling pre-making. The field can returns data with onFetchData callback function and can also returns option selected with this associated the data on click of the option displayed by the filed with the onOptionSubmit callback function.

• Import

  import { FetchAutocompleteField } from '@smile/haring-react';
• Extends Autocomplete
• Source View Source Code
• Package @smile/haring-react

Storybook Docs

Props

Name	Type	Default	Description
deDebounce	number	1000	Time before the string written in the field is taken into account. If the user modifies the field value before the end of the delay, the delay starts again from the beginning
minValueLength	number	5	Minimum length of the field value for started the request
placeholder	string	"89 Pall Mall, St. James's, London SW1Y 5HS, United Kingdom"	Value of the placeholder field
onOptionSubmit	(value: IValue<T>) => void	-	Callback function called when an option of the field is selected. The function returns IValue<T>
onFetchData	(value: string) => Promise<IValue<T>[]>	-	Callback function called when the request returns data
...	-	-	extends autocomplete Props

IFetchOption

Name	Type	Default	Description
key *	string	-	Key of option
value *	string	-	Value of option

IValue<T>

Name	Type	Default	Description
label *	string	-	Label displayed on options list and returned by the onFetchData function
Value *	T	-	The request data part corresponding to the selected option associated with the label