Autocomplete Component

A powerful autocomplete/combobox component with search functionality, single and multiple selection, and flexible filtering options.

Overview

The Autocomplete component provides:

• Single and multiple item selection with search
• Real-time filtering as you type
• Custom filter functions for advanced filtering
• Chip display for multiple selections
• Loading state support
• Customizable placement and positioning
• Keyboard navigation support
• Flexible item text and value mapping

When to Use

Use the Autocomplete component when you need to:

• Create searchable select inputs with filtering
• Implement autocomplete functionality with suggestions
• Build multi-select interfaces with search capability
• Create custom filterable dropdown lists
• Implement complex selection interfaces with real-time search

Key Features

• Selection Modes:

  • Single selection: Choose one item at a time
  • Multiple selection: Select multiple items with chip display
  • Toggle selection: Deselect items by clicking again or removing chips

• Search & Filtering:

  • Real-time filtering as you type
  • Custom filter function support for advanced filtering
  • Smart scoring system (exact match, starts with, contains)
  • Selected items on top option when searching

• Display Features:

  • Chip display for multiple selections
  • Dynamic input placeholder based on selection state
  • Checkbox indicators for multiple mode
  • Loading spinner during data fetching
  • Clear button to reset selection

• Input Features:

  • Searchable input field
  • Clearable selection
  • Readonly and disabled states
  • Loading state with spinner
  • Custom placeholder text

• Interaction:

  • Click outside to close
  • ESC key to close
  • Keyboard navigation support
  • Backspace to remove selected items (multiple mode)
  • Smooth animations and transitions

• Customization:

  • Custom placement (top, bottom, left, right)
  • Offset configuration
  • Custom width settings
  • Flexible styling options
  • Custom item rendering through slots

Props

Prop	Type	Default	Description
items	Array	[]	Array of items to display
modelValue	String/Number/Array/Object	null	Selected value(s)
itemText	String	'text'	Property name for item display text
itemValue	String	'value'	Property name for item value
itemDisabled	String	'disabled'	Property name for item disabled state
multiple	Boolean	false	Enable multiple selection
filterFunction	Function	null	Custom filter function
selectedOnTop	Boolean	false	Show selected items at the top
placement	String	'bottom'	Dropdown placement
offset	Array	[0, 0.125]	Offset from trigger
menuWidth	String/Number	null	Custom dropdown width
matchTriggerWidth	Boolean	true	Match dropdown width to trigger
placeholder	String	''	Input placeholder text
disabled	Boolean	false	Disable the autocomplete
loading	Boolean	false	Show loading state
clearable	Boolean	false	Show clear button
readonly	Boolean	false	Make input readonly

Events

Event	Payload	Description
update:modelValue	value	Emitted when selection changes
change	value	Emitted when selection changes
select	item, value	Emitted when item is selected
remove	item, value	Emitted when item is removed
search	searchText	Emitted when search text changes

Slots

Slot	Props	Description
no-data	-	Custom no data content

Methods

Method	Description
focus()	Focus the input field
blur()	Blur the input field
openMenu()	Open the dropdown menu
closeMenu()	Close the dropdown menu
search(value)	Set the search text programmatically

API Reference →

View Code →