@coreui/vue-pro/dist/cjs/components/autocomplete/CAutocomplete.d.ts

UI Components Library for Vue.js

import { PropType } from 'vue';
import type { Option, OptionsGroup, Search } from './types';
declare const CAutocomplete: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * Only allow selection of predefined options.
     * When `true`, users cannot enter custom values that are not in the options list.
     * When `false`, users can enter and select custom values.
     *
     * @default false
     */
    allowOnlyDefinedOptions: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Enables selection cleaner element.
     * When `true`, displays a clear button that allows users to reset the selection.
     * The cleaner button is only shown when there is a selection and the component is not disabled or read-only.
     *
     * @default false
     */
    cleaner: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether to clear the internal search state after selecting an option.
     *
     * When set to `true`, the internal search value used for filtering options is cleared
     * after a selection is made. This affects only the component's internal logic.
     *
     * Note: This does **not** clear the visible input field if the component is using external search
     * or is controlled via the `search-value` prop. In such cases, clearing must be handled externally.
     *
     * @default true
     */
    clearSearchOnSelect: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Specifies the container element for positioning the dropdown.
     * - `HTMLElement`: Direct reference to a DOM element
     * - `Function`: Function that returns a DOM element
     * - `string`: CSS selector string to identify the container element
     * Used in conjunction with the teleport prop to control dropdown positioning.
     *
     * @default 'body'
     */
    container: {
        type: PropType<HTMLElement | (() => HTMLElement) | string>;
        default: string;
    };
    /**
     * Toggle the disabled state for the component.
     * When `true`, the Vue.js autocomplete is non-interactive and appears visually disabled.
     * Users cannot type, select options, or trigger the dropdown.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Provide valuable, actionable feedback to your users with HTML5 form validation feedback.
     */
    feedback: StringConstructor;
    /**
     * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied `invalid` prop.
     */
    feedbackInvalid: StringConstructor;
    /**
     * Provide valuable, actionable valid feedback when using standard HTML form validation which applied `valid` prop.
     */
    feedbackValid: StringConstructor;
    /**
     * Highlight options that match the search criteria.
     * When `true`, matching portions of option labels are visually highlighted
     * based on the current search input value.
     *
     * @default false
     */
    highlightOptionsOnSearch: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Set the id attribute for the native input element.
     * This id is used for accessibility purposes and form associations.
     * If not provided, a unique id may be generated automatically.
     */
    id: StringConstructor;
    /**
     * Show dropdown indicator/arrow button.
     * When `true`, displays a dropdown arrow button that can be clicked
     * to manually show or hide the options dropdown.
     */
    indicator: BooleanConstructor;
    /**
     * Set component validation state to invalid.
     */
    invalid: BooleanConstructor;
    /**
     * Add a caption for a component.
     */
    label: StringConstructor;
    /**
     * When set, the options list will have a loading style: loading spinner and reduced opacity.
     * Use this to indicate that options are being fetched asynchronously.
     * The dropdown remains functional but shows visual loading indicators.
     */
    loading: BooleanConstructor;
    /**
     * The name attribute for the input element.
     * Used for form submission and identification in form data.
     * Important for proper form handling and accessibility.
     */
    name: StringConstructor;
    /**
     * List of option elements.
     * Can contain Option objects, OptionsGroup objects, or plain strings.
     * Plain strings are converted to simple Option objects internally.
     * This is a required prop - the Vue.js autocomplete needs options to function.
     */
    options: {
        type: PropType<(Option | OptionsGroup | string)[]>;
        required: true;
    };
    /**
     * Sets maxHeight of options list.
     * Controls the maximum height of the dropdown options container.
     * Can be a number (pixels) or a CSS length string (e.g., '200px', '10rem').
     * When content exceeds this height, a scrollbar will appear.
     *
     * @default 'auto'
     */
    optionsMaxHeight: {
        type: PropType<number | string>;
        default: string;
    };
    /**
     * Specifies a short hint that is visible in the search input.
     * Displayed when the input is empty to guide user interaction.
     * Standard HTML input placeholder behavior.
     */
    placeholder: StringConstructor;
    /**
     * Toggle the readonly state for the component.
     * When `true`, users can view and interact with the dropdown but cannot
     * type in the search input or modify the selection through typing.
     * Selection via clicking options may still be possible.
     */
    readOnly: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * When it is present, it indicates that the user must choose a value before submitting the form.
     * Adds HTML5 form validation requirement. The form will not submit
     * until a valid selection is made.
     */
    required: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Determines whether the selected options should be cleared when the options list is updated.
     * When `true`, any previously selected options will be reset whenever the options
     * list undergoes a change. This ensures that outdated selections are not retained
     * when new options are provided.
     *
     * @default false
     */
    resetSelectionOnOptionsChange: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Enables and configures search functionality.
     * - `'external'`: Search is handled externally, filtering is not applied internally
     * - `'global'`: Enables global keyboard search when dropdown is closed
     * - Object with `external` and `global` boolean properties for fine-grained control
     */
    search: PropType<Search>;
    /**
     * Sets the label for no results when filtering.
     * - `false`: Don't show any message when no results found
     * - `true`: Show default "No results found" message
     * - `string`: Show custom text message
     *
     * @default false
     */
    searchNoResultsLabel: {
        type: PropType<boolean | string>;
        default: boolean;
    };
    /**
     * Show hint options based on the current input value.
     * When `true`, displays a preview/hint of the first matching option
     * as semi-transparent text in the input field, similar to browser autocomplete.
     *
     * @default false
     */
    showHints: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Size the component small or large.
     * - `'sm'`: Small size variant
     * - `'lg'`: Large size variant
     * - `undefined`: Default/medium size
     */
    size: PropType<"sm" | "lg">;
    /**
     * Enable teleportation of the dropdown to a different container.
     * When `true`, the dropdown is rendered in the container specified by the `container` prop
     * instead of being rendered inline. This is useful for avoiding z-index issues and positioning
     * problems when the autocomplete is inside elements with overflow constraints.
     *
     * @default false
     */
    teleport: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Add helper text to a form control.
     */
    text: StringConstructor;
    /**
     * Display validation feedback in a styled tooltip.
     */
    tooltipFeedback: BooleanConstructor;
    /**
     * Set component validation state to valid.
     */
    valid: BooleanConstructor;
    /**
     * The model value for v-model support.
     * Can be a string (matched against option labels) or number (matched against option values).
     * Used for two-way data binding with v-model.
     */
    modelValue: PropType<number | string>;
    /**
     * Sets the initially selected value for the Vue.js autocomplete component.
     * Can be a string (matched against option labels) or number (matched against option values).
     * The component will attempt to find and select the matching option on mount.
     */
    value: PropType<number | string>;
    /**
     * Enable virtual scroller for the options list.
     * When `true`, only visible options are rendered in the DOM for better performance
     * with large option lists. Works in conjunction with `visible-items` prop.
     *
     * @default false
     */
    virtualScroller: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Toggle the visibility of autocomplete dropdown.
     * Controls whether the dropdown is initially visible.
     * The dropdown visibility can still be toggled through user interaction.
     *
     * @default false
     */
    visible: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Amount of visible items when virtualScroller is enabled.
     * Determines how many option items are rendered at once when virtual scrolling is active.
     * Higher values show more items but use more memory. Lower values improve performance.
     *
     * @default 10
     */
    visibleItems: {
        type: NumberConstructor;
        default: number;
    };
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "change" | "hide" | "show" | "update:modelValue")[], "input" | "change" | "hide" | "show" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Only allow selection of predefined options.
     * When `true`, users cannot enter custom values that are not in the options list.
     * When `false`, users can enter and select custom values.
     *
     * @default false
     */
    allowOnlyDefinedOptions: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Enables selection cleaner element.
     * When `true`, displays a clear button that allows users to reset the selection.
     * The cleaner button is only shown when there is a selection and the component is not disabled or read-only.
     *
     * @default false
     */
    cleaner: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether to clear the internal search state after selecting an option.
     *
     * When set to `true`, the internal search value used for filtering options is cleared
     * after a selection is made. This affects only the component's internal logic.
     *
     * Note: This does **not** clear the visible input field if the component is using external search
     * or is controlled via the `search-value` prop. In such cases, clearing must be handled externally.
     *
     * @default true
     */
    clearSearchOnSelect: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Specifies the container element for positioning the dropdown.
     * - `HTMLElement`: Direct reference to a DOM element
     * - `Function`: Function that returns a DOM element
     * - `string`: CSS selector string to identify the container element
     * Used in conjunction with the teleport prop to control dropdown positioning.
     *
     * @default 'body'
     */
    container: {
        type: PropType<HTMLElement | (() => HTMLElement) | string>;
        default: string;
    };
    /**
     * Toggle the disabled state for the component.
     * When `true`, the Vue.js autocomplete is non-interactive and appears visually disabled.
     * Users cannot type, select options, or trigger the dropdown.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Provide valuable, actionable feedback to your users with HTML5 form validation feedback.
     */
    feedback: StringConstructor;
    /**
     * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied `invalid` prop.
     */
    feedbackInvalid: StringConstructor;
    /**
     * Provide valuable, actionable valid feedback when using standard HTML form validation which applied `valid` prop.
     */
    feedbackValid: StringConstructor;
    /**
     * Highlight options that match the search criteria.
     * When `true`, matching portions of option labels are visually highlighted
     * based on the current search input value.
     *
     * @default false
     */
    highlightOptionsOnSearch: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Set the id attribute for the native input element.
     * This id is used for accessibility purposes and form associations.
     * If not provided, a unique id may be generated automatically.
     */
    id: StringConstructor;
    /**
     * Show dropdown indicator/arrow button.
     * When `true`, displays a dropdown arrow button that can be clicked
     * to manually show or hide the options dropdown.
     */
    indicator: BooleanConstructor;
    /**
     * Set component validation state to invalid.
     */
    invalid: BooleanConstructor;
    /**
     * Add a caption for a component.
     */
    label: StringConstructor;
    /**
     * When set, the options list will have a loading style: loading spinner and reduced opacity.
     * Use this to indicate that options are being fetched asynchronously.
     * The dropdown remains functional but shows visual loading indicators.
     */
    loading: BooleanConstructor;
    /**
     * The name attribute for the input element.
     * Used for form submission and identification in form data.
     * Important for proper form handling and accessibility.
     */
    name: StringConstructor;
    /**
     * List of option elements.
     * Can contain Option objects, OptionsGroup objects, or plain strings.
     * Plain strings are converted to simple Option objects internally.
     * This is a required prop - the Vue.js autocomplete needs options to function.
     */
    options: {
        type: PropType<(Option | OptionsGroup | string)[]>;
        required: true;
    };
    /**
     * Sets maxHeight of options list.
     * Controls the maximum height of the dropdown options container.
     * Can be a number (pixels) or a CSS length string (e.g., '200px', '10rem').
     * When content exceeds this height, a scrollbar will appear.
     *
     * @default 'auto'
     */
    optionsMaxHeight: {
        type: PropType<number | string>;
        default: string;
    };
    /**
     * Specifies a short hint that is visible in the search input.
     * Displayed when the input is empty to guide user interaction.
     * Standard HTML input placeholder behavior.
     */
    placeholder: StringConstructor;
    /**
     * Toggle the readonly state for the component.
     * When `true`, users can view and interact with the dropdown but cannot
     * type in the search input or modify the selection through typing.
     * Selection via clicking options may still be possible.
     */
    readOnly: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * When it is present, it indicates that the user must choose a value before submitting the form.
     * Adds HTML5 form validation requirement. The form will not submit
     * until a valid selection is made.
     */
    required: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Determines whether the selected options should be cleared when the options list is updated.
     * When `true`, any previously selected options will be reset whenever the options
     * list undergoes a change. This ensures that outdated selections are not retained
     * when new options are provided.
     *
     * @default false
     */
    resetSelectionOnOptionsChange: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Enables and configures search functionality.
     * - `'external'`: Search is handled externally, filtering is not applied internally
     * - `'global'`: Enables global keyboard search when dropdown is closed
     * - Object with `external` and `global` boolean properties for fine-grained control
     */
    search: PropType<Search>;
    /**
     * Sets the label for no results when filtering.
     * - `false`: Don't show any message when no results found
     * - `true`: Show default "No results found" message
     * - `string`: Show custom text message
     *
     * @default false
     */
    searchNoResultsLabel: {
        type: PropType<boolean | string>;
        default: boolean;
    };
    /**
     * Show hint options based on the current input value.
     * When `true`, displays a preview/hint of the first matching option
     * as semi-transparent text in the input field, similar to browser autocomplete.
     *
     * @default false
     */
    showHints: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Size the component small or large.
     * - `'sm'`: Small size variant
     * - `'lg'`: Large size variant
     * - `undefined`: Default/medium size
     */
    size: PropType<"sm" | "lg">;
    /**
     * Enable teleportation of the dropdown to a different container.
     * When `true`, the dropdown is rendered in the container specified by the `container` prop
     * instead of being rendered inline. This is useful for avoiding z-index issues and positioning
     * problems when the autocomplete is inside elements with overflow constraints.
     *
     * @default false
     */
    teleport: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Add helper text to a form control.
     */
    text: StringConstructor;
    /**
     * Display validation feedback in a styled tooltip.
     */
    tooltipFeedback: BooleanConstructor;
    /**
     * Set component validation state to valid.
     */
    valid: BooleanConstructor;
    /**
     * The model value for v-model support.
     * Can be a string (matched against option labels) or number (matched against option values).
     * Used for two-way data binding with v-model.
     */
    modelValue: PropType<number | string>;
    /**
     * Sets the initially selected value for the Vue.js autocomplete component.
     * Can be a string (matched against option labels) or number (matched against option values).
     * The component will attempt to find and select the matching option on mount.
     */
    value: PropType<number | string>;
    /**
     * Enable virtual scroller for the options list.
     * When `true`, only visible options are rendered in the DOM for better performance
     * with large option lists. Works in conjunction with `visible-items` prop.
     *
     * @default false
     */
    virtualScroller: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Toggle the visibility of autocomplete dropdown.
     * Controls whether the dropdown is initially visible.
     * The dropdown visibility can still be toggled through user interaction.
     *
     * @default false
     */
    visible: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Amount of visible items when virtualScroller is enabled.
     * Determines how many option items are rendered at once when virtual scrolling is active.
     * Higher values show more items but use more memory. Lower values improve performance.
     *
     * @default 10
     */
    visibleItems: {
        type: NumberConstructor;
        default: number;
    };
}>> & Readonly<{
    onInput?: ((...args: any[]) => any) | undefined;
    onChange?: ((...args: any[]) => any) | undefined;
    onHide?: ((...args: any[]) => any) | undefined;
    onShow?: ((...args: any[]) => any) | undefined;
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}>, {
    invalid: boolean;
    visible: boolean;
    disabled: boolean;
    container: string | HTMLElement | (() => HTMLElement);
    teleport: boolean;
    valid: boolean;
    tooltipFeedback: boolean;
    visibleItems: number;
    highlightOptionsOnSearch: boolean;
    loading: boolean;
    virtualScroller: boolean;
    required: boolean;
    optionsMaxHeight: string | number;
    searchNoResultsLabel: string | boolean;
    indicator: boolean;
    allowOnlyDefinedOptions: boolean;
    cleaner: boolean;
    clearSearchOnSelect: boolean;
    readOnly: boolean;
    resetSelectionOnOptionsChange: boolean;
    showHints: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export { CAutocomplete };