# useTypeaheadSearch
> Manages typeahead search by accumulating key presses with an auto-reset timer.

Accumulates individual key presses into a search string with an auto-reset timer. Used internally by [Menu](https://next.wave-design-system.pages.dev/components/menu.md) and [SelectMenu](https://next.wave-design-system.pages.dev/components/forms/select-menu/single-select-menu.md) for keyboard-driven search.

## Import

```js
import { useTypeaheadSearch } from '@volue/wave-react';
```

## Example

```jsx
() => {
  const [search, setSearch] = React.useState('');
  const [searchRef, handleTypeaheadSearch] = useTypeaheadSearch(s =>
    setSearch(s)
  );

  return (
    <Flex flow="column" cross="start">
      <Box
        tabIndex={0}
        onKeyDown={e => {
          if (e.key.length === 1) {
            handleTypeaheadSearch(e.key);
          }
        }}
        padding="spacingM"
        css={{
          background: '$backgroundNeutralModerate',
          border: '1px solid $borderNeutralModerate',
          '&:focus': { outline: '2px solid $borderAccentHover' }
        }}
      >
        <Text>{'Focus here and type'}</Text>
      </Box>
      <Text>{`Search: ${search || '(empty)'}`}</Text>
    </Flex>
  );
};
```

---

## API reference

### Arguments

| Name             | Type                       | Default | Description                                                          | Required |
| ---------------- | -------------------------- | ------- | -------------------------------------------------------------------- | -------- |
| `onSearchChange` | `(search: string) => void` | `—`     | Callback invoked with the accumulated search string when it changes. | Yes      |

### Returns

`[searchRef: RefObject<string>, handleTypeaheadSearch: (key: string) => void, resetTypeahead: () => void]` — A tuple with a ref to the current search string, a handler to call with each key press, and a reset function.