wrTypeahead

import { wrTypeahead } from 'ngwr/utils';

@Component({
  host: { '(keydown)': 'onKeydown($event)' },
})
export class Menu {
  readonly labels = input.required<readonly string[]>();
  protected readonly cursor = signal(0);
  private readonly typeahead = wrTypeahead();

  protected onKeydown(event: KeyboardEvent): void {
    const index = this.typeahead.handleKey(event, this.labels(), this.cursor());
    if (index === null) return this.onOtherKey(event);
    event.preventDefault();
    if (index >= 0) this.cursor.set(index);
  }
}

Typed	Result
One letter	The next row after the current one that starts with it, wrapping past the end.
The same letter again	The next row that starts with it, so the letter cycles.
More letters	The row that starts with the whole run. The current row stays while it still matches.
A pause of `resetMs`	The next key starts a new run.
Space	Joins a run that has started. As the first key it is left to you.
Ctrl, Meta or Alt, an IME key, a key in a text field	Left to you: `handleKey` returns `null`.

const locale = inject(WR_LIVE_LOCALE, { optional: true });
const typeahead = wrTypeahead({ resetMs: 700, locale: () => locale?.() });

typeahead.handleKey(event, [
  { label: 'Copy' },
  { label: 'Copy link', disabled: true },
  { label: 'Cut' },
], current);

if (typeahead.type(event)) {
  event.preventDefault();
  open();
  afterNextRender(() => {
    const index = typeahead.find(labels(), cursor());
    if (index >= 0) cursor.set(index);
  }, { injector });
}

Name	Description	Type	Default
`wrTypeahead(options?)`	Returns a `WrTypeahead`. One per list: it holds the run.	`(options?: WrTypeaheadOptions) => WrTypeahead`	`—`
`options.resetMs`	The pause, in milliseconds, after which the next key starts a new run.	`number`	`500`
`options.locale`	The language the labels are in, for the case folding. The browser locale when omitted.	`string \| (() => string \| undefined)`	`—`
`handleKey(event, items, current)`	Takes a `keydown` and answers the index to move to, `-1` when the key joined the run and nothing matches, or `null` when the key is not a typeahead key.	`(event: KeyboardEvent, items: readonly (string \| WrTypeaheadItem)[], current: number) => number \| null`	`—`
`type(event)`	Adds a `keydown` to the run. Returns whether the key was taken.	`(event: KeyboardEvent) => boolean`	`—`
`find(items, current)`	The index the run points at, or `-1`.	`(items: readonly (string \| WrTypeaheadItem)[], current: number) => number`	`—`
`active`	Whether a run is in progress.	`boolean`	`—`
`reset()`	Drops the run.	`() => void`	`—`

Usage

Rules

Disabled rows and language

Key now, search later

API

See also