AutoCompleteField

An AutoCompleteField is a TextField that suggests completions for the word at the caret. The choices that contain the typed text show in a ChoiceList under the word, and the rest of the highlighted choice shows grey after the caret. The value is the text, and it changes at each typed letter, as in a TextField.

<UIToolbox.AutoCompleteField label="Message" choices="hello,help,thanks,today" />

var message = new AutoCompleteField("Message");
// "@" picks this provider for the word after it, also in the middle of the text
message.SetProvider("@", query => people.Select(p => new ChoiceItem(p.Name, p.Team) { InsertText = p.Handle }));
message.SetProvider("#", _ => new List<ChoiceItem> { "bug", "feature", "docs" });
// A slow source, such as a server: a newer word cancels the token
message.SetAsyncProvider("$", async (query, token) => await tickers.FindAsync(query.Query, token));
message.ItemPicked += item => Debug.Log($"Picked {item.Text}");

Member	Description
`Choices` (`choices`), `Items`	The choices of the default provider, for the words without a trigger.
`SetProvider(trigger, provider)`	Sets the provider for the words after `trigger`. The trigger "" replaces `Items` for the other words. Null removes the provider.
`SetAsyncProvider(trigger, provider)`	Sets a provider that returns a `Task`. A newer word cancels the token of the older request, and the late results of an older word are dropped. While a request runs, the typed letters filter the last results. A failed task logs the exception and shows nothing. To wait for the typing to stop, start with `await Task.Delay(200, token)`.
`CompletionQuery`	What a provider gets: `Text`, `Trigger`, `Query` (the typed part of the word), `Before` (the text before the word and its trigger), `Start` and `Caret`.
`ChoiceItem.InsertText`	The text that a choice puts in the field. Null puts `Text`. A trailing space adds the space at Tab.
`Matches`, `HasCompletion`, `IsOpen`, `CurrentQuery`	The choices for the word, and the state of the list.
`UpdateCompletion(force)`, `Accept(item)`, `Dismiss()`	Find the choices again, accept a choice (the highlighted one by default), and hide the choices.
`ItemPicked`	The accepted `ChoiceItem`.

The list shows when the word has typed text, or a trigger. Ctrl+Space shows it for an empty word.
Tab accepts the grey text and keeps the focus. Without a completion, Tab moves the focus on.
Enter accepts the highlighted choice while the list shows. Enter and its submit do not reach the field user at that press, so a console does not run the line.
Up and Down move the highlight while the list shows. Else they go to the field user, for example a command history.
Escape, Left, Right, Home and End hide the choices. A click on a row accepts it.
The grey text shows only when the caret is at the end of the text.
The Debug console tab of the CodeDemo example uses an AutoCompleteField for the command line. Its provider gives the command names only for the first word: query.Before.Trim().Length == 0.

Styling

The rules are in Assets/UIToolbox/Runtime/Resources/UIToolbox/Styles/Controls.uss.

Class	Element
`tb-auto-complete`	The field, a `TextField`.
`tb-auto-complete__ghost`	The grey text after the caret: a label over the text, with `--tb-color-text-muted`. It copies the padding and the alignment of the text. The rule is `.tb-auto-complete .unity-label.tb-auto-complete__ghost`: a theme override needs the same specificity.
`tb-auto-complete__popup`	The list under the word, with `tb-choice-list` (see SearchDropdown). It is at least 160 px wide.

#AutoCompleteField

#Styling

AutoCompleteField

Styling