@engie-group/fluid-design-system-react/lib/components/autocompleteInput/NJAutocompleteInput.d.ts

Fluid Design System React

import React from 'react';
import { ICommonFormItemProps } from '../form-item/NJFormItem';
export declare const NJAutocompleteInput: React.ForwardRefExoticComponent<INJAutocompleteInputProps & React.RefAttributes<HTMLInputElement>>;
interface IDataItem {
    name: string;
    value: string;
}
export interface INJAutocompleteInputProps extends ICommonFormItemProps {
    /**
     * Data list to search on
     *<br>
     * name: name to search on<br>
     * value: a custom value returned when user selects an item
     */
    data?: Array<IDataItem>;
    /**
     * Limit of results to show on search
     */
    searchLimit?: number;
    /**
     * Unique id for the list
     */
    listId: string;
    /**
     * Label of the list
     * @example "Countries suggestions"
     */
    listLabel: string;
    /**
     * Instructions on how to navigate the list. It is append after the input label.
     * @example "Use the UP / DOWN arrows to navigate within the suggestion list. Press Enter to select an option. On touch devices, use swipe to navigate and double tap to select an option"
     */
    inputInstructions: string;
    /**
     * Function that returns a string to display the results
     * count depending on the count (zero, one or more).
     * @example (count) => 'No result' || `${count} result` || `${count} results`
     */
    resultsCountMessage: (resultCount: number) => string;
    /**
     * Whether to show number of results or no
     */
    showNumberOfResults?: boolean;
    /**
     * Whether to show no results message
     */
    showNoResultsMessage?: boolean;
    /**
     * Function called on option select
     * @param option name: string; value: string
     */
    onOptionSelect?: (option: IDataItem) => void;
}
export {};