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 (