# Autocomplete

Extended input that provide suggestions while the user types


edit on github

# Examples

# Base

# Object array

# Groups

# Infinite Scroll

# Props

Prop name Description Type Values Default
expanded Makes input full width when inside a grouped or addon field boolean -
rounded Makes the element rounded boolean -
icon Icon name to be added string -
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
autocomplete Native options to use in HTML5 validation string -
maxlength Same as native maxlength, plus character counter number|string -
useHtml5Validation Enable html 5 native validation boolean - Config -> "useHtml5Validation": true
statusIcon Show status icon using field and variant prop boolean - Config -> "statusIcon": true
validationMessage The message which is shown when a validation error occurs string -
data Options / suggestions array - []
size Vertical size of input, optional string small, medium, large
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'
keepFirst The first option will always be pre-selected (easier to just hit enter or tab) boolean -
clearOnSelect Clear input text on select boolean -
openOnFocus Open dropdown list on focus boolean -
customFormatter Function to format an option to a string for display in the input as alternative to field prop) func -
checkInfiniteScroll Makes the component check if list reached scroll end and emit infinite-scroll event. boolean -
keepOpen Keep open dropdown list after select boolean -
clearable Add a button/icon to clear the inputed text boolean -
maxHeight Max height of dropdown content string|number -
dropdownPosition Position of dropdown string auto, top, bottom 'auto'
animation Transition name to apply on dropdown list string - Config -> 'autocomplete.animation': 'fade'
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 -
debounceTyping Number of milliseconds to delay before to emit typing event number -
iconRight Icon name to be added on the right side string -
iconRightClickable Clickable icon right if exists boolean -
appendToBody Append autocomplete content to body boolean -
rootClass Root class string -
menuClass Options menu class string -
expandedClass Expanded options menu class string -
openedTopClass string -
itemClass Option class string -
itemHoveredClass Option hovered class string -
itemDisabledClass Option disabled class string -
inputClasses Classes to apply on internal input (@see o-input style docs) object -

# Events

Event name Type Description
icon-click
blur undefined
focus undefined
select undefined
infinite-scroll
typing undefined
icon-right-click undefined

# Slots

Name Description Bindings
header
group [
{
"name": "group"
},
{
"name": "index"
}
]
default [
{
"name": "option"
},
{
"name": "index"
}
]
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