# Autocomplete

Extended input that provide suggestions while the user types

edit on github

# Examples

# Base

# 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 -
v-model number|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'
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
blur undefined
focus undefined
input undefined
select undefined
typing undefined
icon-right-click undefined

# Slots

Name Description Bindings
default [
"name": "option"
"name": "index"

# 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