Auto Complete

Design

Code

Simple Example

<nile-auto-complete 
  [allMenuItems]="['Apple', 'Banana', 'Grapes', 'Mango', 'Orange']"
  placeholder="Type a fruit">
</nile-auto-complete>

Name	Description	Type	Default
isDropdownOpen	Whether the dropdown is currently open	boolean	false
openOnFocus	If true, opens dropdown when input gains focus	boolean	false
disabled	Disables the autocomplete	boolean	false
value	The current value of the input field	string	''
placeholder	Placeholder text for the input field	string	'Type here ..'
noBorder	Removes border from the input field	boolean	false
enableVirtualScroll	Enables virtual scroll in options	boolean	false
loading	Shows the loading icon in suffix.(does not renders the dropdown when true)	boolean	false
allMenuItems	Array of available options	array	[]

Name	Description	Type	Default
filterFunction	custom function to filter, should returns true or false	Function	(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase())
renderItemFunction	Function to take in an item object and returns the property to be renderes and used as value	Function	(item:any)=>item

Name	Description	Event Detail
nile-complete	Emitted when an item is selected from the dropdown	{ value: string }
nile-show	Emitted when the dropdown is shown	-
nile-hide	Emitted when the dropdown is hidden	-
nile-after-show	Emitted after the dropdown is shown and animations complete	-
nile-after-hide	Emitted after the dropdown is hidden and animations complete	-

Name	Description	Event Detail
--virtual-scroll-container-width	Used to set the min width of panel width	110px
--virtual-scroll-container-height	Used to set the min width of panel height	200px

Name	Description
base	The component’s base wrapper.
input	The input field for user input.
dropdown	The dropdown menu displaying suggestions.
menu	The container for the dropdown menu items.

Name	Description
(default)	The main content of the autocomplete component.
input	Slot for custom input field.
menu	Slot for custom dropdown menu items.