@jimka/typescript-ui

Appearance

AutoCompleteField ​

AutoCompleteField is a text field with type-ahead suggestions. Suggestions can come from a static array or from a data Store.

It implements Bindable<string>.

Static suggestions ​

typescript
import { AutoCompleteField } from '@jimka/typescript-ui/component/input';
const fruit = AutoCompleteField({
    suggestions: ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Date'],
    placeholder: 'Type a fruit…',
});

fruit.addSelectListener(value => {
    console.log('selected:', value);
});

panel.addComponent(fruit);

Store-backed suggestions ​

typescript
import { AutoCompleteField } from '@jimka/typescript-ui/component/input';
const userPicker = AutoCompleteField({
    store:        userStore,
    displayField: 'name',
    minChars:     2,
    debounceMs:   200,
    matchMode:    'contains',
});

AutoCompleteFieldConfig ​

See AutoCompleteFieldConfig for the full option list. Highlights:

OptionDefaultPurpose
suggestions—Static suggestion array.
store—Data store; mutually exclusive with suggestions.
displayField—Required when store is set; field name used for display text.
minChars1Minimum characters typed before suggestions show.
debounceMs200Debounce on each keystroke.
maxSuggestions10Cap on suggestions shown at once.
placeholder—Empty-state placeholder text.
matchMode'contains'How the typed query matches — 'contains' or 'startsWith' (AutoCompleteMatchMode).

Notes ​

  • The suggestion dropdown fades in / out over 100 ms via Animation. A fresh show() during a fade-out cancels the deferred detach, so a fast hide-then-reshow (typical when typing rapidly) doesn't snap. Honours prefers-reduced-motion: reduce.

See also ​