# Advanced | JavaScript AI Autocomplete Docs

> For the complete documentation index, see [llms.txt](https://ai-autocomplete.com/llms.txt). A markdown version of any page on this site is available by appending `.md` to its URL path — the homepage is at `/index.md`.

Advanced guide for integrating the AI Autocomplete SDK with JavaScript. Code examples, setup, and API reference.

Source: https://ai-autocomplete.com/docs/vanilla/advanced

---

Patterns for power users — overrides, controlled state, SSR safety, and accessibility.

## Inject field options at runtime

Fields whose options come from your own data (a location search, a customer list, live inventory) have their own guide. [Field Injection](https://ai-autocomplete.com/docs/vanilla/field-injection) walks through marking a field as injected in Edit Logic and wiring optionOverrides to your endpoint.

## Personalize suggestions per user

Suggestions can be tailored to each user with what your app already knows about them: a profile, saved preferences, recent activity. [Personalization](https://ai-autocomplete.com/docs/vanilla/personalization) covers what to send, how to keep it current, the size cap, and what stays private.

## Controlled mode

Pass value, completedParams, onChange, and onParamsChange to lift state out of the library. Push updates back in with setValue and setCompletedParams.

**controlled.ts**

```tsx
const ac = new AIAutocomplete(container, {
  apiConfig: { apiKey: "pk_v1_your_public_key" },
  value: "initial text",
  completedParams: [],
  onChange: (text) => {/* sync to your store */},
  onParamsChange: (params) => {/* sync to your store */},
  onSubmit: handleSubmit,
});

// Push updates back into the library
ac.setValue("new text");
ac.setCompletedParams([]);
```

## SSR safety

The library is SSR-safe — there's no top-level document or window access. Instantiate the library only on the client (e.g. in a useEffect, onMount, or after window is defined).

## Accessibility

The component implements the ARIA combobox pattern. Things you should know:

-   The dropdown uses role="listbox" with aria-activedescendant pointing at the highlighted option.
-   Pills are buttons (role="button") and announce as part of the live input.
-   Keyboard: arrow keys navigate, Enter submits, Tab autocompletes, Escape closes the dropdown.