diff --git a/components/doc/autocomplete/index.js b/components/doc/autocomplete/index.js
index a1433e7949..daaff92489 100644
--- a/components/doc/autocomplete/index.js
+++ b/components/doc/autocomplete/index.js
@@ -856,6 +856,18 @@ itemTemplate(item) {
false |
Specifies if multiple values can be selected. |
+
+ showEmptyMessage |
+ boolean |
+ false |
+ Whether to show the empty message or not. |
+
+
+ emptyMessage |
+ string |
+ No results found. |
+ Text to display when there is no data. Defaults to global value in i18n translation configuration. |
+
minLength |
number |
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index 516e292a06..25747cd5ba 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -445,7 +445,7 @@ export const AutoComplete = React.memo(
useUpdateEffect(() => {
if (searchingState) {
- ObjectUtils.isNotEmpty(props.suggestions) ? show() : hide();
+ ObjectUtils.isNotEmpty(props.suggestions) || props.showEmptyMessage ? show() : hide();
setSearchingState(false);
}
}, [props.suggestions]);
@@ -658,63 +658,64 @@ AutoComplete.defaultProps = {
__TYPE: 'AutoComplete',
id: null,
inputRef: null,
- 'aria-label': null,
- 'aria-labelledby': null,
- appendTo: null,
- autoFocus: false,
+ value: null,
+ name: null,
+ type: 'text',
+ suggestions: null,
+ field: null,
+ optionGroupLabel: null,
+ optionGroupChildren: null,
+ optionGroupTemplate: null,
+ forceSelection: false,
autoHighlight: false,
- className: null,
- completeMethod: null,
- delay: 300,
- disabled: false,
+ virtualScrollerOptions: null,
+ scrollHeight: '200px',
dropdown: false,
- dropdownAutoFocus: true,
- dropdownIcon: 'pi pi-chevron-down',
dropdownMode: 'blank',
- dropdownAriaLabel: null,
- field: null,
- forceSelection: false,
- inputClassName: null,
+ dropdownAutoFocus: true,
+ multiple: false,
+ minLength: 1,
+ delay: 300,
+ style: null,
+ className: null,
inputId: null,
inputStyle: null,
- itemTemplate: null,
- maxLength: null,
- minLength: 1,
- multiple: false,
- name: null,
- onBlur: null,
- onChange: null,
- onClear: null,
- onClick: null,
- onContextMenu: null,
- onDblClick: null,
- onDropdownClick: null,
- onFocus: null,
- onHide: null,
- onKeyPress: null,
- onKeyUp: null,
- onMouseDown: null,
- onSelect: null,
- onShow: null,
- onUnselect: null,
- optionGroupChildren: null,
- optionGroupLabel: null,
- optionGroupTemplate: null,
+ inputClassName: null,
panelClassName: null,
panelStyle: null,
placeholder: null,
readOnly: false,
- removeIcon: 'pi pi-times-circle',
- scrollHeight: '200px',
- selectedItemTemplate: null,
+ disabled: false,
+ maxLength: null,
size: null,
- style: null,
- suggestions: null,
+ appendTo: null,
+ showEmptyMessage: false,
+ emptyMessage: null,
tabIndex: null,
+ autoFocus: false,
tooltip: null,
tooltipOptions: null,
+ completeMethod: null,
+ itemTemplate: null,
+ selectedItemTemplate: null,
transitionOptions: null,
- type: 'text',
- value: null,
- virtualScrollerOptions: null
+ dropdownIcon: 'pi pi-chevron-down',
+ removeIcon: 'pi pi-times-circle',
+ 'aria-label': null,
+ 'aria-labelledby': null,
+ onChange: null,
+ onFocus: null,
+ onBlur: null,
+ onSelect: null,
+ onUnselect: null,
+ onDropdownClick: null,
+ onClick: null,
+ onDblClick: null,
+ onMouseDown: null,
+ onKeyUp: null,
+ onKeyPress: null,
+ onContextMenu: null,
+ onClear: null,
+ onShow: null,
+ onHide: null
};
diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
index 01d8432b59..7b7bcdf537 100644
--- a/components/lib/autocomplete/AutoCompletePanel.js
+++ b/components/lib/autocomplete/AutoCompletePanel.js
@@ -1,4 +1,5 @@
import * as React from 'react';
+import { localeOption } from '../api/Api';
import { CSSTransition } from '../csstransition/CSSTransition';
import { Portal } from '../portal/Portal';
import { Ripple } from '../ripple/Ripple';
@@ -46,7 +47,6 @@ export const AutoCompletePanel = React.memo(
);
} else {
const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion;
-
return (
props.onItemClick(e, suggestion)}>
{content}
@@ -61,6 +61,14 @@ export const AutoCompletePanel = React.memo(
};
const createContent = () => {
+ if (props.showEmptyMessage && ObjectUtils.isEmpty(props.suggestions)) {
+ const emptyMessage = props.emptyMessage || localeOptions('emptyMessage');
+ return (
+
+ );
+ }
if (props.virtualScrollerOptions) {
const virtualScrollerProps = {
...props.virtualScrollerOptions,
@@ -84,7 +92,6 @@ export const AutoCompletePanel = React.memo(
return ;
} else {
const items = createItems();
-
return (
{items}
diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
index b00a6c357e..c8dd9ca198 100755
--- a/components/lib/autocomplete/autocomplete.d.ts
+++ b/components/lib/autocomplete/autocomplete.d.ts
@@ -1,8 +1,8 @@
import * as React from 'react';
-import { CSSTransitionProps } from '../csstransition';
import TooltipOptions from '../tooltip/tooltipoptions';
+import { VirtualScrollerProps, VirtualScroller } from '../virtualscroller';
+import { CSSTransitionProps } from '../csstransition';
import { IconType } from '../utils';
-import { VirtualScroller, VirtualScrollerProps } from '../virtualscroller';
type AutoCompleteOptionGroupTemplateType = React.ReactNode | ((suggestion: any, index: number) => React.ReactNode);
@@ -47,64 +47,65 @@ interface AutoCompleteCompleteMethodParams {
export interface AutoCompleteProps extends Omit, HTMLSpanElement>, 'onChange' | 'onSelect' | 'ref'> {
id?: string;
+ inputRef?: React.Ref;
value?: any;
- appendTo?: AutoCompleteAppendToType;
- autoFocus?: boolean;
+ name?: string;
+ type?: string;
+ suggestions?: any[];
+ field?: string;
+ optionGroupLabel?: string;
+ optionGroupChildren?: string;
+ optionGroupTemplate?: AutoCompleteOptionGroupTemplateType;
+ forceSelection?: boolean;
autoHighlight?: boolean;
- className?: string;
- delay?: number;
- disabled?: boolean;
+ virtualScrollerOptions?: VirtualScrollerProps;
+ scrollHeight?: string;
dropdown?: boolean;
- dropdownAutoFocus?: boolean;
- dropdownIcon?: IconType;
dropdownMode?: string;
- dropdownAriaLabel?: string;
- field?: string;
- forceSelection?: boolean;
- inputClassName?: string;
+ dropdownAutoFocus?: boolean;
+ multiple?: boolean;
+ minLength?: number;
+ delay?: number;
+ style?: object;
+ className?: string;
inputId?: string;
- inputRef?: React.Ref;
inputStyle?: object;
- itemTemplate?: AutoCompleteItemTemplateType;
- maxLength?: number;
- minLength?: number;
- multiple?: boolean;
- name?: string;
- optionGroupChildren?: string;
- optionGroupLabel?: string;
- optionGroupTemplate?: AutoCompleteOptionGroupTemplateType;
+ inputClassName?: string;
panelClassName?: string;
panelStyle?: object;
placeholder?: string;
readOnly?: boolean;
- removeIcon?: IconType;
- scrollHeight?: string;
- selectedItemTemplate?: AutoCompleteSelectedItemTemplateType;
+ disabled?: boolean;
+ showEmptyMessage?: boolean;
+ emptyMessage?: string;
+ maxLength?: number;
size?: number;
- style?: object;
- suggestions?: any[];
+ appendTo?: AutoCompleteAppendToType;
tabIndex?: number;
+ autoFocus?: boolean;
tooltip?: string;
tooltipOptions?: TooltipOptions;
- transitionOptions?: CSSTransitionProps;
- type?: string;
- virtualScrollerOptions?: VirtualScrollerProps;
completeMethod?(e: AutoCompleteCompleteMethodParams): void;
- onBlur?(event: React.FocusEvent): void;
+ itemTemplate?: AutoCompleteItemTemplateType;
+ selectedItemTemplate?: AutoCompleteSelectedItemTemplateType;
+ transitionOptions?: CSSTransitionProps;
+ dropdownIcon?: IconType;
+ removeIcon?: IconType;
onChange?(e: AutoCompleteChangeParams): void;
- onClear?(event: React.SyntheticEvent): void;
+ onFocus?(event: React.FocusEvent): void;
+ onBlur?(event: React.FocusEvent): void;
+ onSelect?(e: AutoCompleteSelectParams): void;
+ onUnselect?(e: AutoCompleteUnselectParams): void;
+ onDropdownClick?(e: AutoCompleteDropdownClickParams): void;
onClick?(event: React.MouseEvent): void;
- onContextMenu?(event: React.MouseEvent): void;
onDblClick?(event: React.MouseEvent): void;
- onDropdownClick?(e: AutoCompleteDropdownClickParams): void;
- onFocus?(event: React.FocusEvent): void;
- onHide?(): void;
- onKeyPress?(event: React.KeyboardEvent): void;
- onKeyUp?(event: React.KeyboardEvent): void;
onMouseDown?(event: React.MouseEvent): void;
- onSelect?(e: AutoCompleteSelectParams): void;
+ onKeyUp?(event: React.KeyboardEvent): void;
+ onKeyPress?(event: React.KeyboardEvent): void;
+ onContextMenu?(event: React.MouseEvent): void;
+ onClear?(event: React.SyntheticEvent): void;
onShow?(): void;
- onUnselect?(e: AutoCompleteUnselectParams): void;
+ onHide?(): void;
children?: React.ReactNode;
}