Autocomplete INPUT Widget

franz · March 2, 2022, 5:21pm

Is there an way to make an Autocomplete Input Widget?

thanks
Franz

Nikhil · March 3, 2022, 6:14am

@franz not yet. There is an open GitHub issue for it. Please do upvote it

github.com/appsmithorg/appsmith

[Feature] Autocomplete / Typeahead widget

opened 09:22AM - 27 Aug 21 UTC

somangshu

Enhancement Needs Design App Viewers Pod UI Building Pod Medium effort New Widget

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