@magicx-eng/ai-autocomplete-react 0.14.2 → 0.16.0

package/README.md

@@ -17,7 +17,7 @@ A React/TypeScript SDK that provides a guided AI-powered autocomplete experience
 - **IME-safe** — composition events are buffered so input text is committed once, after composition ends
 - **Client-side filtering** — instant substring filtering on every keystroke
 - **Datepicker** — date parameters are answered with a calendar instead of an option list. Click a day or navigate with the arrow keys; the date is committed the way it would be written — `Tuesday` for a date inside the next week, `March 23` for one later this year, `March 23 2027` for another year. Tapping a committed date re-opens the calendar on the month that text names now — for a weekday name, that is the next such day, not the one originally picked.
-- **Option overrides** — inject or dynamically generate client-side options per suggestion type
+- **Option overrides** — supply the options for a parameter yourself: a fixed list, a computed one, or one fetched from your own search endpoint as the user types
 - **Product strip (opt-in)** — plug in any platform's product search and the dropdown renders a horizontal row of product cards below the options; the SDK owns the UI, your integration owns only `fetch` and `transform`
 - **Controlled & uncontrolled** — works out of the box or integrates with external state
 - **Ref forwarding** — imperative `focus()`, `blur()`, `reset()`, and `setMode()` via ref
@@ -311,10 +311,11 @@ function App() {
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `onSubmit` | `(result: AutocompleteResult) => void` | **required** | Called on Enter or submit button. |
+| `onResult?` | `(result: AutocompleteResult) => void` | — | Called after every successful round-trip with the structured query as it now stands — see [Reading the query as it's built](#reading-the-query-as-its-built). |
 | `onError?` | `(error: Error) => void` | — | Called when a fetch fails. |
 | `apiConfig?` | `APIConfig` | — | Runtime API configuration (see below). |
 | `additionalContext?` | `Record<string, unknown>` | — | Optional user context. Include whatever you know about the user (a profile, preferences, workspace, anything) to personalize suggested parameters and options to them. |
-| `optionOverrides?` | `Record<string, (query: string) => SuggestionOption[]>` | — | Override options per suggestion type. |
+| `optionOverrides?` | `OptionOverrides` | — | Supply the options for a parameter yourself, per suggestion type — fixed, computed, or fetched as the user types. See [Option Overrides](#option-overrides). |
 | `maskCompletedText?` | `boolean` | `false` | When `true`, omits completed params' literal text from API requests (for masking PII/sensitive values from the server). |
 | `className?` | `string` | — | CSS class applied to the container. |
 | `columns?` | `number` | `2` | Number of columns in the dropdown grid. |
@@ -497,7 +498,7 @@ The SDK handles token refresh transparently: 401 → `getAccessToken` → retry
 
 ### `useAIAutocomplete(options)`
 
-The headless hook for Tier 2 and Tier 3. Accepts the same options as `<AIAutocomplete />` except for the component-only rendering props: `className`, `ref`, `pillPlacement`, `mode`, `animations`, and `autoFocus` (those belong to the wrapping component — the hook doesn't own the input element). `optionsPosition` **is** accepted: it sets the arrow-key direction and flows through `dropdownProps` to the dropdown. `onFocus` and `onBlur` are forwarded and fire whenever the consumer-owned textarea's focus changes (they're driven by `inputProps.onFocus` / `inputProps.onBlur`).
+The headless hook for Tier 2 and Tier 3. Accepts the same options as `<AIAutocomplete />` except for the component-only rendering props: `className`, `ref`, `pillPlacement`, `mode`, `animations`, and `autoFocus` (those belong to the wrapping component — the hook doesn't own the input element). `optionsPosition` **is** accepted: it sets the arrow-key direction and flows through `dropdownProps` to the dropdown. `onFocus` and `onBlur` are forwarded and fire whenever the consumer-owned textarea's focus changes (they're driven by `inputProps.onFocus` / `inputProps.onBlur`). `onResult` is accepted too and fires after every successful round-trip — see [Reading the query as it's built](#reading-the-query-as-its-built).
 
 #### Return Value
 
@@ -507,6 +508,7 @@ The headless hook for Tier 2 and Tier 3. Accepts the same options as `<AIAutocom
 |---|---|---|
 | `completedParams` | `CompletedParamState[]` | Filled parameters. |
 | `skippedParams` | `SkippedParamState[]` | Suggestions the user dismissed with <kbd>→</kbd>. Nothing renders them — pass them to `buildSubmitResult` for a hand-rolled submit. |
+| `identifiedParams` | `IdentifiedParamState[]` | Parameters the server recognised in the user's own words. Already rendered through `segments`; pass them to `buildSubmitResult` for a hand-rolled submit so it reports the same `identified_params` the SDK's own results do. |
 | `suggestionPills` | `Suggestion[]` | Unfilled suggestions (pills). First item is the active pill. |
 | `segments` | `Segment[]` | Input text split into typed text vs completed params — completed segments render as bold `<strong>` runs inside the editor. |
 | `newParamId` | `string \| null` | ID of the most recently added param (for shimmer animation). |
@@ -571,11 +573,40 @@ The dropdown component for Tier 2. Spread `dropdownProps` from the hook (and add
 
 ### `AutocompleteResult`
 
+The structured query as the SDK currently understands it. The same object is passed to `onSubmit` when the user submits and to `onResult` after every successful round-trip:
+
 | Field | Type | Description |
 |---|---|---|
-| `query` | `string` | Plain text as the user sees it. |
-| `raw_query` | `string` | Text with placeholder tokens (e.g. `"Create a {{TASK_1}}"`). |
-| `completed_params` | `CompletedParam[]` | Filled parameter values, followed by any the user skipped (see below). |
+| `query` | `string` | Plain text as the user sees it, trimmed. |
+| `raw_query` | `string` | `query` with each completed param replaced by its placeholder token (e.g. `"Create a {{TASK_1}}"`). |
+| `completed_params` | `CompletedParam[]` | Filled parameter values in query order, followed by any the user skipped (see below). |
+| `identified_params` | `IdentifiedParam[]` | Parameters the server recognised in the user's own words, as `{ type, value }` — e.g. `{ type: "due_date", value: "Friday" }` when the user typed "by Friday" instead of picking a date. They are not tokenized in `raw_query`, and they are tentative: each response replaces the set, and an entry drops out as soon as its text is edited away. |
+| `is_ready` | `boolean` | Whether the server considers the query complete enough to act on. |
+
+#### Reading the query as it's built
+
+You don't have to wait for submit. `onResult` fires after **every** successful round-trip with the result as it now stands, so you can mirror the structured query live — a preview panel, a draft saved as the user goes, analytics on how far they got. It works on both tiers:
+
+```tsx
+<AIAutocomplete
+  onResult={(result) => setPreview(result)}
+  onSubmit={(result) => run(result)}
+/>
+
+// Tier 2 / 3
+const ac = useAIAutocomplete({
+  onResult: (result) => saveDraft(result),
+  onSubmit: (result) => run(result),
+});
+```
+
+What "every successful round-trip" means in practice:
+
+- It fires once per response the SDK applied — including the very first request on mount (an empty result) and after a response that promoted text the user had already typed into a completed param.
+- It does **not** fire for a request that failed (`onError` does), was cancelled, or was superseded by a newer one before it returned.
+- Keystrokes that haven't been sent yet don't fire it. Typing is debounced and only reaches the server once at least two new characters have been added, so `onResult` lags the input by a beat.
+- An inline arrow function is fine — the latest one you passed is always the one called.
+- A submit is the last result you saw plus whatever the user typed since. Both are built by the same exported `buildSubmitResult`, so the shapes never drift.
 
 #### Skipped parameters
 
@@ -585,7 +616,7 @@ Pressing <kbd>→</kbd> at the end of the input dismisses the active pill. The d
 { placeholder: "", type: "goal", text: "skipped", kind: null }
 ```
 
-Tier 2 consumers who build their own submit payload get the raw skips from the hook as `skippedParams`, and can fold them in the same way with the exported `buildSubmitResult(text, completedParams, skippedParams)`.
+Tier 2 consumers who build their own submit payload get the raw skips from the hook as `skippedParams`, and can fold them in the same way with the exported `buildSubmitResult(text, completedParams, skippedParams, { identifiedParams, isReady })` — the last argument carries the hook's `identifiedParams` and `isReady` so a hand-rolled submit reports the same `identified_params` and `is_ready` the SDK's own results do.
 
 > **Reading `skippedParams` directly:** the array is append-only until `reset()`. The "drop a skip whose type got filled" rule is applied when the payload is built, not by pruning the array — so if the user skips `goal` and later fills one, the raw array still holds the `goal` entry. That's deliberate: the filter self-heals if they then delete that param's text, where pruning would discard the signal for good. `buildSubmitResult` applies the rule for you; to apply it elsewhere (say, a "you skipped X" badge), use the exported `withSkippedParams(completedParams, skippedParams)`.
 
@@ -733,23 +764,38 @@ correlate a user's report with the query that produced it.
 
 ## Option Overrides
 
+Supply the options for a parameter yourself instead of taking the server's. Each entry is keyed by the suggestion `type` and is a function of the phrase the user has typed for that parameter — return an array for a fixed or computed list, or a promise for one that lives behind a request (the dropdown shows its loading skeleton until it settles):
+
 ```tsx
-<AIAutocomplete
-  optionOverrides={{
-    account: () => [
-      { text: "Savings", is_tappable: true, kind: null },
-      { text: "Checking", is_tappable: true, kind: null },
-    ],
-    value: (query) => {
-      const digits = query.replace(/\D/g, "");
-      if (!digits) return [{ text: "$100", is_tappable: true, kind: null }];
-      return [{ text: `$${digits}`, is_tappable: true, kind: null }];
-    },
-  }}
-  onSubmit={handleSubmit}
-/>
+import type { OptionOverrides } from "@magicx-eng/ai-autocomplete-react";
+
+// Inline is fine: the functions are read live on each call, so a fresh object
+// per render is not a swap. Only the set of overridden types has to change
+// for the core to be told.
+const overrides: OptionOverrides = {
+  account: () => [
+    { text: "Savings", is_tappable: true, kind: null },
+    { text: "Checking", is_tappable: true, kind: null },
+  ],
+  location: async (query, signal) => {
+    const res = await fetch(`/api/locations?q=${encodeURIComponent(query)}`, { signal });
+    const places = await res.json();
+    return places.map((p) => ({ text: p.name, is_tappable: true, kind: null }));
+  },
+};
+
+<AIAutocomplete optionOverrides={overrides} onSubmit={handleSubmit} />;
 ```
 
+How it behaves:
+
+- **Called** once the moment the parameter becomes active, with whatever the user has already typed for it (usually `""`, the request for the default list), and again on the SDK's typing debounce with each new phrase — so you can search or page a larger list. Return the same list again if the phrase is already covered.
+- **Shown as-is.** The answer is not filtered again by the phrase it was produced for, so a fuzzy match survives. Between two calls the previous answer is filtered locally by what the user types. Typing an option's full text completes the parameter, as it does for a server option.
+- **The server steps back.** Its own options for an overridden type are never shown, and it is not asked for suggestions while an override owns the active parameter — it is asked again when the parameter is answered or skipped. Return an empty list for a typed phrase and the SDK falls back to the server for that phrase (once), the way it does for a parameter with no matching options. An empty list for `""` leaves the parameter on screen with no options.
+- **Honour `signal`** — it is aborted when a newer phrase supersedes the call, when the parameter stops being active, and on unmount. A throw or a rejection is logged once and treated as an empty answer, never as a fetch error.
+
+The hook's `isLoading` is true while an answer is pending, the same flag it raises for a suggest request.
+
 ## License
 
 Private package. All rights reserved.

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { AutocompleteResult, OptionOverrides, APIConfig, AppearanceMode, CompletedParamState, ProductsConfig, Product, Suggestion, SuggestionOption, FormatType, DateMonthView, SkippedParamState, Segment } from '@magicx-eng/ai-autocomplete-vanilla';
-export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, DateMonthView, FormatType, OptionOverrides, Product, ProductsConfig, Segment, SkippedParamState, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, formatDate, isoDate, monthLabel, parseDate, parseLooseDate, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
+import { AutocompleteResult, OptionOverrides, APIConfig, AppearanceMode, CompletedParamState, ProductsConfig, Product, Suggestion, SuggestionOption, FormatType, DateMonthView, SkippedParamState, IdentifiedParamState, Segment } from '@magicx-eng/ai-autocomplete-vanilla';
+export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, DateMonthView, FormatType, IdentifiedParam, IdentifiedParamState, OptionOverrides, Product, ProductsConfig, Segment, SkippedParamState, SubmitResultExtras, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, formatDate, isoDate, monthLabel, parseDate, parseLooseDate, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
 import * as react from 'react';
 import { ReactNode, KeyboardEvent, ChangeEvent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -17,7 +17,21 @@ interface AIAutocompleteHandle {
     skipActivePill: () => void;
 }
 interface AIAutocompleteProps {
+    /** Called on Enter or submit-button click with the final structured query. */
     onSubmit: (result: AutocompleteResult) => void;
+    /**
+     * Called after every successful suggestion round-trip with the structured
+     * query as the SDK now understands it — the same `AutocompleteResult` shape
+     * `onSubmit` receives, so you can mirror the query as it is built (a live
+     * preview, a draft, analytics) without waiting for submit.
+     *
+     * Fires once per response that was applied, including the initial request
+     * on mount (an empty result). Does not fire for a request that failed, was
+     * aborted, or was superseded before it returned, and nothing fires for a
+     * keystroke that hasn't been sent yet. May be an inline arrow — the latest
+     * function is always the one called.
+     */
+    onResult?: (result: AutocompleteResult) => void;
     onError?: (error: Error) => void;
     optionOverrides?: OptionOverrides;
     maskCompletedText?: boolean;
@@ -102,7 +116,15 @@ interface AIAutocompleteProps {
     submitButton?: ReactNode;
 }
 interface UseAIAutocompleteOptions {
+    /** Called on Enter with the final structured query. */
     onSubmit?: (result: AutocompleteResult) => void;
+    /**
+     * Called after every successful suggestion round-trip with the structured
+     * query as the SDK now understands it — see `AIAutocompleteProps.onResult`.
+     * A hand-rolled submit should hand the consumer the same shape; build it
+     * with `buildSubmitResult(text, completedParams, skippedParams, { identifiedParams, isReady })`.
+     */
+    onResult?: (result: AutocompleteResult) => void;
     onError?: (error: Error) => void;
     optionOverrides?: OptionOverrides;
     maskCompletedText?: boolean;
@@ -189,6 +211,13 @@ interface UseAIAutocompleteReturn {
      * entries the SDK's own requests do.
      */
     skippedParams: SkippedParamState[];
+    /**
+     * Params the server identified in the user's own words. Already rendered
+     * through `segments`; exposed so a hand-rolled submit can pass them to
+     * `buildSubmitResult` and report the same `identified_params` the SDK's
+     * own results carry.
+     */
+    identifiedParams: IdentifiedParamState[];
     suggestionPills: Suggestion[];
     setActivePill: (index: number) => void;
     /**
@@ -310,7 +339,7 @@ interface AIAutocompleteDropdownProps {
     /**
      * Extra disabled gate for the skip button beyond `isLoading`. Provided by
      * `dropdownProps` from the hook (wired to `inSelectionAnimation`): the
-     * UI-facing loading flag is deliberately suppressed during the ~500ms
+     * UI-facing loading flag is deliberately suppressed during the ~170ms
      * post-selection window, but `skipActivePill` no-ops in it — the button
      * renders disabled instead of swallowing clicks silently. Default: false.
      */
@@ -373,6 +402,6 @@ declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProp
 
 declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, skipDisabled, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, formatType, dateView, selectedDateIso, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
 
-declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, additionalContext, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showSkipButton, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
+declare function useAIAutocomplete({ onSubmit, onResult, onError, optionOverrides, maskCompletedText, apiConfig, additionalContext, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showSkipButton, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
 
 export { AIAutocomplete, AIAutocompleteDropdown, type AIAutocompleteDropdownProps, type AIAutocompleteHandle, type AIAutocompleteProps, type UseAIAutocompleteOptions, type UseAIAutocompleteReturn, useAIAutocomplete };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { AutocompleteResult, OptionOverrides, APIConfig, AppearanceMode, CompletedParamState, ProductsConfig, Product, Suggestion, SuggestionOption, FormatType, DateMonthView, SkippedParamState, Segment } from '@magicx-eng/ai-autocomplete-vanilla';
-export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, DateMonthView, FormatType, OptionOverrides, Product, ProductsConfig, Segment, SkippedParamState, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, formatDate, isoDate, monthLabel, parseDate, parseLooseDate, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
+import { AutocompleteResult, OptionOverrides, APIConfig, AppearanceMode, CompletedParamState, ProductsConfig, Product, Suggestion, SuggestionOption, FormatType, DateMonthView, SkippedParamState, IdentifiedParamState, Segment } from '@magicx-eng/ai-autocomplete-vanilla';
+export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, DateMonthView, FormatType, IdentifiedParam, IdentifiedParamState, OptionOverrides, Product, ProductsConfig, Segment, SkippedParamState, SubmitResultExtras, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, formatDate, isoDate, monthLabel, parseDate, parseLooseDate, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
 import * as react from 'react';
 import { ReactNode, KeyboardEvent, ChangeEvent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -17,7 +17,21 @@ interface AIAutocompleteHandle {
     skipActivePill: () => void;
 }
 interface AIAutocompleteProps {
+    /** Called on Enter or submit-button click with the final structured query. */
     onSubmit: (result: AutocompleteResult) => void;
+    /**
+     * Called after every successful suggestion round-trip with the structured
+     * query as the SDK now understands it — the same `AutocompleteResult` shape
+     * `onSubmit` receives, so you can mirror the query as it is built (a live
+     * preview, a draft, analytics) without waiting for submit.
+     *
+     * Fires once per response that was applied, including the initial request
+     * on mount (an empty result). Does not fire for a request that failed, was
+     * aborted, or was superseded before it returned, and nothing fires for a
+     * keystroke that hasn't been sent yet. May be an inline arrow — the latest
+     * function is always the one called.
+     */
+    onResult?: (result: AutocompleteResult) => void;
     onError?: (error: Error) => void;
     optionOverrides?: OptionOverrides;
     maskCompletedText?: boolean;
@@ -102,7 +116,15 @@ interface AIAutocompleteProps {
     submitButton?: ReactNode;
 }
 interface UseAIAutocompleteOptions {
+    /** Called on Enter with the final structured query. */
     onSubmit?: (result: AutocompleteResult) => void;
+    /**
+     * Called after every successful suggestion round-trip with the structured
+     * query as the SDK now understands it — see `AIAutocompleteProps.onResult`.
+     * A hand-rolled submit should hand the consumer the same shape; build it
+     * with `buildSubmitResult(text, completedParams, skippedParams, { identifiedParams, isReady })`.
+     */
+    onResult?: (result: AutocompleteResult) => void;
     onError?: (error: Error) => void;
     optionOverrides?: OptionOverrides;
     maskCompletedText?: boolean;
@@ -189,6 +211,13 @@ interface UseAIAutocompleteReturn {
      * entries the SDK's own requests do.
      */
     skippedParams: SkippedParamState[];
+    /**
+     * Params the server identified in the user's own words. Already rendered
+     * through `segments`; exposed so a hand-rolled submit can pass them to
+     * `buildSubmitResult` and report the same `identified_params` the SDK's
+     * own results carry.
+     */
+    identifiedParams: IdentifiedParamState[];
     suggestionPills: Suggestion[];
     setActivePill: (index: number) => void;
     /**
@@ -310,7 +339,7 @@ interface AIAutocompleteDropdownProps {
     /**
      * Extra disabled gate for the skip button beyond `isLoading`. Provided by
      * `dropdownProps` from the hook (wired to `inSelectionAnimation`): the
-     * UI-facing loading flag is deliberately suppressed during the ~500ms
+     * UI-facing loading flag is deliberately suppressed during the ~170ms
      * post-selection window, but `skipActivePill` no-ops in it — the button
      * renders disabled instead of swallowing clicks silently. Default: false.
      */
@@ -373,6 +402,6 @@ declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProp
 
 declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, skipDisabled, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, formatType, dateView, selectedDateIso, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
 
-declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, additionalContext, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showSkipButton, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
+declare function useAIAutocomplete({ onSubmit, onResult, onError, optionOverrides, maskCompletedText, apiConfig, additionalContext, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showSkipButton, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
 
 export { AIAutocomplete, AIAutocompleteDropdown, type AIAutocompleteDropdownProps, type AIAutocompleteHandle, type AIAutocompleteProps, type UseAIAutocompleteOptions, type UseAIAutocompleteReturn, useAIAutocomplete };