appsmithorg / appsmithorg/appsmith

[Feature] Autocomplete / Typeahead widget

Open
#6,928 7 comments 13 reactions 2 assignees Claimed by @dilippitchika View on GitHub
Enhancement Medium effort Needs Design New Widget Query Widgets & IDE Pod Widgets & Accelerators Pod Widgets Product
Dominant language
TypeScript
Stars
40.9k
Forks
4.8k
Avg merge
1d 22h
Merged PRs (30d)
45

Description

## 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.