[Feature] Autocomplete / Typeahead widget

[somangshu]

Summary

The autocomplete widget is a normal text input enhanced by a panel of suggested options.

Motivation

The widget is useful for setting the value of a single-line textbox in one of two types of scenarios:

• The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: combo box.
• The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: free solo.

Requirements

Name	Type	Default	Description
autoComplete	bool	false	If true, the portion of the selected suggestion that has not been typed by the user, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state.
autoHighlight	bool	false	If true, the first option is automatically highlighted.
autoSelect	bool	false	If true, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.
blurOnSelect	'mouse'| 'touch'| bool	false	Control if the input should be blurred when an option is selected:- false the input is not blurred. - true the input is always blurred. - touch the input is blurred after a touch event. - mouse the input is blurred after a mouse event.
clearOnBlur	bool	!props.freeSolo	If true, the input's text will be cleared on blur if no value is selected.Set to true if you want to help the user enter a new value. Set to false if you want to help the user resume his search.
clearOnEscape	bool	false	If true, clear all values when the user presses escape and the popup is closed.
defaultValue	any	props.multiple ? [] : null	The default input value. Use when the component is not controlled.
disableClearable	bool	false	If true, the input can't be cleared.
disabled	bool	false	If true, the input will be disabled.
filterOptions	func		A filter function that determines the options that are eligible.Signature:function(options: T[], state: object) => undefined options: The options to render.state: The state of the component.
filterSelectedOptions	bool	false	If true, hide the selected options from the list box.
freeSolo	bool	false	If true, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
getOptionSelected	func		Used to determine if an option is selected, considering the current value. Uses strict equality by default. Signature:function(option: T, value: T) => boolean option: The option to test.value: The value to test against.
groupBy	func		If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when renderGroup is not provided.Signature:function(options: T) => string options: The options to group.
limitTags	number	-1	The maximum number of tags that will be visible. Should be auto
multiple (X - Doubt)	bool	false	If true, value must be an array and the menu will support multiple selections.
noOptionsText	node	'No options'	Text to display when there are no options.
onChange	func		Callback fired when the value changes.Signature:function(event: object, value: T | T[], reason: string) => void event: The event source of the callback.value: The new value of the component.reason: One of "create-option", "select-option", "remove-option", "blur" or "clear".
options*	array		Array of options.
selectOnFocus	bool	!props.freeSolo	If true, the input's text will be selected on focus. It helps the user clear the selected value.
value	any		The value of the autocomplete.The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the getOptionSelected prop.

[dilippitchika]

Another community request for the feature #9976

[vishaldfreak]

is there an update on this, is it still in the roadmap?

[josiah-roberts]

We need this kind of type-to-pick-one functionality for a number of our use-cases.

[ws4eva]

One vote for me, too.

[dilippitchika]

Thanks @ws4eva we will prioritise this soon

[brusamatteo]

Another vote here

[somangshu]

An alternate solution right now is to use the select widget with a server side query 👇

https://user-images.githubusercontent.com/11089579/221787711-903c5693-dec4-43ce-bcb7-c9637eb054f3.mov

This is not an appropriate solution, but only an alternative for the time being