Skip to content
On this page

Autocomplete

Extended input that provide suggestions while the user types

Base

Selected:

Show code

Objects array

Selected:

Show code

Groups

Selected:

Show code

Infinite Scroll

Selected:

Show code

Class props


How does Class props inspector work?
Class propDescriptionPropsSuffixes
expandedClassClass of the autocomplete menu expanded.expanded
inputClassesClasses to apply on internal input. More detail here
itemClassClass of the menu items.
itemEmptyClassClass of the menu empty placeholder item.
itemFooterClassClass of the menu footer item.
itemGroupTitleClassClass of the menu items group title.
itemHeaderClassClass of the menu header item.
itemHoverClassClass of the menu items on hover.
menuClassClass of the autocomplete menu.
menuPositionClassClass of the autocomplete menu position.menu-positionauto
top
bottom
rootClassClass of the root element.


Props

Prop nameDescriptionTypeValuesDefault
animationTransition name to apply on dropdown liststring-
From config

autocomplete: {
  animation: 'fade'
}
appendToBodyAppend autocomplete content to bodyboolean-
autocompleteNative options to use in HTML5 validationstring-
checkInfiniteScrollMakes the component check if list reached scroll end and emit infinite-scroll event.boolean-
clearOnSelectClear input text on selectboolean-
clearableAdd a button/icon to clear the inputed textboolean-
confirmKeysArray 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']
customFormatterFunction to format an option to a string for display in the input as alternative to field prop)func-
dataOptions / suggestionsarray-[]
debounceTypingNumber of milliseconds to delay before to emit typing eventnumber-
expandedMakes input full width when inside a grouped or addon fieldboolean-
fieldProperty of the object (if data is array of objects) to use as display text, and to keep track of selected optionstring-'value'
groupFieldProperty of the object (if data is array of objects) to use as display text of groupstring-
groupOptionsProperty of the object (if data is array of objects) to use as key to get items array of each group, optionalstring-
iconIcon name to be addedstring-
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
iconRightIcon name to be added on the right sidestring-
iconRightClickableClickable icon right if existsboolean-
itemTagMenu item tag namestring-
From config

autocomplete: {
  itemTag: 'div'
}
keepFirstThe first option will always be pre-selected (easier to just hit enter or tab)boolean-
keepOpenKeep open dropdown list after selectboolean-
maxHeightMax height of dropdown contentstring|number-
maxlengthSame as native maxlength, plus character counternumber|string-
menuPositionPosition of dropdownstringauto, top, bottom'auto'
menuTagMenu tag namestring-
From config

autocomplete: {
  menuTag: 'div'
}
openOnFocusOpen dropdown list on focusboolean-
overrideboolean-
roundedMakes the element roundedboolean-
selectOnClickOutsideTrigger the select event for the first pre-selected option when clicking outside and keep-first is enabledboolean-
selectableFooterAllows the footer in the autocomplete to be selectableboolean-
selectableHeaderAllows the header in the autocomplete to be selectableboolean-
sizeVertical size of input, optionalstringsmall, medium, large
statusIconShow status icon using field and variant propboolean-
From config

{
   "statusIcon": true
}
typeInput typestring-'text'
useHtml5ValidationEnable html 5 native validationboolean-
From config

{
   "useHtml5Validation": true
}
v-modelnumber|string-
validationMessageThe message which is shown when a validation error occursstring-

Events

Event namePropertiesDescription
icon-click
blur
focus
invalid
update:modelValue
selectselected Object - selected option
event Event - native event
infinite-scroll
typing
icon-right-click
select-header
select-footer

Slots

NameDescriptionBindings
header
group
default
empty
footer

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--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-shadow0 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-margin0
--oruga-autocomplete-menu-max-height$autocomplete-menu-max-height200px
--oruga-autocomplete-menu-padding$autocomplete-menu-padding.5rem 0 .5rem 0
--oruga-autocomplete-menu-zindex$autocomplete-menu-zindex20

Released under the MIT License.