@synapse-ui/autocomplete

Accessible Angular autocomplete/combobox with signal-based filtering and keyboard navigation. Implements ControlValueAccessor for reactive forms.

Installation

npm install @synapse-ui/autocomplete

Usage

import { Autocomplete } from '@synapse-ui/autocomplete';

@Component({
  imports: [Autocomplete],
  template: ` <synapse-autocomplete [options]="fruits" placeholder="Search fruits..." label="Fruit" (selected)="onSelect($event)" /> `,
})
export class MyComponent {
  fruits = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'];
  onSelect(value: string) {
    console.log(value);
  }
}

Inputs

| Input | Type | Default | Description | | --------------- | --------------------- | -------------------- | ----------------------------------------- | | options | string[] | [] | Full list of options to filter from | | placeholder | string | 'Search...' | Input placeholder | | label | string \| undefined | undefined | Associated label text | | disabled | boolean | false | Disables the control | | noResultsText | string | 'No results found' | Message shown when filter returns nothing |

Outputs

| Output | Payload | Description | | ------------- | -------- | -------------------------------- | | selected | string | Emitted when an option is chosen | | inputChange | string | Emitted on every keystroke |

Running unit tests

Run nx test autocomplete to execute the unit tests.