Autocomplete suggests matching options in a dropdown while the user types and lets them select a value without entering it in full.
To make Autocomplete search for each word in a query independently and ignore case and diacritics, add createSearchPredicate to the option filtering — this enables smart search.
kbqAutocompleteRelativeToCaret opens the dropdown next to the caret. In wide fields, suggestions appear where the user is likely looking.
kbqAutocompleteTextMode inserts the selected option after the caret instead of replacing the field's content. It is useful for multiline fields, slash commands and mentions.
kbqAutocompleteTriggers sets the characters and strings that start a query. For example, use / for commands and @ for mentions.
Faded text after the caret shows how the input will be completed. With autoActiveFirstOption disabled, the hint appears after the user starts navigating the list.
By default the panel sizes to its content and is never narrower than the field or than panelMinWidth, which is 200px. This can be changed with the panelWidth and panelMinWidth attributes:
<!-- Match the field, but never go below panelMinWidth --> <kbq-autocomplete panelWidth="auto" /> <!-- An exact width; panelMinWidth is not applied --> <kbq-autocomplete [panelWidth]="400" /> <!-- Any CSS value works, e.g. shrink to fit the options --> <kbq-autocomplete panelWidth="fit-content" /> <!-- Widen the default lower bound --> <kbq-autocomplete [panelMinWidth]="350" /> <!-- Let the panel grow further with its content; the default cap is 640px --> <kbq-autocomplete [panelMaxWidth]="800" />
Growth by content stops at 640px. The cap is soft — it never makes the panel narrower than the field, and never clamps an explicit panelWidth. Change it globally through the --kbq-panel-size-width-max token, which is shared with select, tree-select and dropdown.
You can place auxiliary elements in the footer: buttons, links, hints.
Key | Action |
|---|---|
| ↓ | Opens the panel. If the panel is open, moves focus to the next enabled option. |
| ↑ | Moves focus to the previous enabled option |
| → | Accepts the suggestion in inline hint mode, closes the panel, and leaves focus in the field |
| Enter | If an option is active, selects it, closes the panel, and leaves focus in the field. In text mode, inserts the selected option at the caret without a line break. |
| Esc / Alt + ↑ | Closes the panel and leaves focus in the field |
| Tab | Closes the panel and moves focus to the next element. In inline hint mode, inserts the suggestion, closes the panel, and leaves focus in the field. |