# Autocomplete

Extended input that provide suggestions while the user types


edit on github

# Examples

# Base

# Object array

# Groups

# Infinite Scroll

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
expandedClass Class of the autocomplete menu expanded. expanded
inputClasses Classes to apply on internal input. More detail here
itemClass Class of the menu items.
itemEmptyClass Class of the menu empty placeholder item.
itemFooterClass Class of the menu footer item.
itemGroupTitleClass Class of the menu items group title.
itemHeaderClass Class of the menu header item.
itemHoverClass Class of the menu items on hover.
menuClass Class of the autocomplete menu.
menuPositionClass Class of the autocomplete menu position. menu-position auto
top
bottom
rootClass Class of the root element.


# Props

Prop name Description Type Values Default
animation Transition name to apply on dropdown list string -
From config

autocomplete: {
  animation: 'fade'
}
appendToBody Append autocomplete content to body boolean -
autocomplete Native options to use in HTML5 validation string -
checkInfiniteScroll Makes the component check if list reached scroll end and emit infinite-scroll event. boolean -
clearOnSelect Clear input text on select boolean -
clearable Add a button/icon to clear the inputed text boolean -
confirmKeys Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter) array - ['Tab', 'Enter']
customFormatter Function to format an option to a string for display in the input as alternative to field prop) func -
data Options / suggestions array - []
debounceTyping Number of milliseconds to delay before to emit typing event number -
expanded Makes input full width when inside a grouped or addon field boolean -
field Property of the object (if data is array of objects) to use as display text, and to keep track of selected option string - 'value'
groupField Property of the object (if data is array of objects) to use as display text of group string -
groupOptions Property of the object (if data is array of objects) to use as key to get items array of each group, optional string -
icon Icon name to be added string -
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
iconRight Icon name to be added on the right side string -
iconRightClickable Clickable icon right if exists boolean -
itemTag Menu item tag name string -
From config

autocomplete: {
  itemTag: 'div'
}
keepFirst The first option will always be pre-selected (easier to just hit enter or tab) boolean -
keepOpen Keep open dropdown list after select boolean -
maxHeight Max height of dropdown content string|number -
maxlength Same as native maxlength, plus character counter number|string -
menuPosition Position of dropdown string auto, top, bottom 'auto'
menuTag Menu tag name string -
From config

autocomplete: {
  menuTag: 'div'
}
openOnFocus Open dropdown list on focus boolean -
override Override classes boolean - false
rounded Makes the element rounded boolean -
selectOnClickOutside Trigger the select event for the first pre-selected option when clicking outside and keep-first is enabled boolean -
selectableFooter Allows the footer in the autocomplete to be selectable boolean -
selectableHeader Allows the header in the autocomplete to be selectable boolean -
size Vertical size of input, optional string small, medium, large
statusIcon Show status icon using field and variant prop boolean -
From config

{
   "statusIcon": true
}
type Input type string - 'text'
useHtml5Validation Enable html 5 native validation boolean -
From config

{
   "useHtml5Validation": true
}
v-model number|string -
validationMessage The message which is shown when a validation error occurs string -

# Events

Event name Properties Description
icon-click
blur
focus
input
select selected Object - selected option
event Event - native event
select-header
select-footer
infinite-scroll
typing
icon-right-click

# Slots

Name Description Bindings
header
group
default
empty
footer

# Style

CSS Variable SASS Variable Default
--oruga-autocomplete-item-color $autocomplete-item-color #000000
--oruga-autocomplete-item-disabled-opacity $autocomplete-item-disabled-opacity $base-disabled-opacity
--oruga-autocomplete-item-font-size $autocomplete-item-font-size $base-font-size
--oruga-autocomplete-item-hover-background-color $autocomplete-item-hover-background-color #f5f5f5
--oruga-autocomplete-item-hover-color $autocomplete-item-hover-color #000000
--oruga-autocomplete-item-line-height $autocomplete-item-line-height $base-line-height
--oruga-autocomplete-item-padding $autocomplete-item-padding .375rem 1rem
--oruga-autocomplete-menu-background $autocomplete-menu-background #ffffff
--oruga-autocomplete-menu-border-radius $autocomplete-menu-border-radius $base-border-radius
--oruga-autocomplete-menu-box-shadow $autocomplete-menu-box-shadow 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02)
--oruga-autocomplete-menu-margin $autocomplete-menu-margin 0
--oruga-autocomplete-menu-max-height $autocomplete-menu-max-height 200px
--oruga-autocomplete-menu-padding $autocomplete-menu-padding .5rem 0 .5rem 0
--oruga-autocomplete-menu-zindex $autocomplete-menu-zindex 20