@bjorkdev/ngx-autocomplete NPM

@bjorkdev/ngx-autocomplete

This package is in pre-release, features are still being added and tested.

This library provides a directive that can turn any input field into an autocomplete field.

Import NxgAutoCompleteDirective to your component:

@Component({
  selector: 'whatever',
  standalone: true,
  imports: [NxgAutoCompleteDirective]
...

Apply the directive to the input element and provide the data:

const sampleData = ['apple', 'banana', 'cherry', 'date'];

<input [ngxAutoComplete]="sampleData" />

Input	Type	Description	Default
`ngxAutoComplete`	`string[]`	The data to render.	`[]`
`ngxAutoCompleteMaxResults`	`number`	Max amount of results to display in the window. Default will display everything.	`0`
`multiple`	`boolean`	Configures the window to allow multiple selections.	`false`
`showWindowOnFocus`	`boolean`	Sets whether the window should popup on input focus.	`false`
`style`	`'light' or 'dark'`	Sets the color of the window.	`light`
`checkboxColor`	`string`	The accent-color of the checkbox if `multiple` is selected.	`#a8a8a8`
`maxHeight`	`string`	Max height of the window.	`400px`

Input	Type	Description
`ngxAutoCompleteItemSelected`	`EventEmitter<string>`	Emitted when an item is selected.
`ngxAutoCompleteItemRemoved`	`EventEmitter<string>`	Emitted when an item is unselected.
`ngxAutCompleteWindowChanged`	`EventEmitter<NgxAutoCompleteWindowEvent>`	Emitted when the window is opened or closed.

Key	Meaning
`arrow up` / `arrow down`	Navigate through the options.
`enter`	Selects / adds the current active option from the dropdown.
`escape`	Hides the dropdown.
`Backspace`	Removes the last item selected from the input or the last character if partial query.