Skip to content
On this page

Autocomplete

Extended input that provide suggestions while the user types

Examples

Base

Selected:

Show code

Objects array

Selected:

Show code

Groups

Selected:

Show code

Infinite Scroll

Selected:

Show code

Class props

'Classes applied to the element'
How does the 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.

Autocomplete component

html
<o-autocomplete></o-autocomplete>

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-
clearIconIcon name to be added on the clear buttonstring-
From config:
autocomplete: {
  clearIcon: 'close-circle'
}
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 <code>data</code> is array of objects) to use as display text of groupstring-
groupOptionsProperty of the object (if <code>data</code> 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 | Component-
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 | Component-
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 <code>keep-first</code> 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
select-header
select-footer
infinite-scroll
typing
icon-right-click

Slots

NameDescriptionBindings
header
group
default
empty
footer

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$autocomplete-item-color#000000
$autocomplete-item-disabled-opacity$base-disabled-opacity
$autocomplete-item-font-size$base-font-size
$autocomplete-item-hover-background-color#f5f5f5
$autocomplete-item-hover-color#000000
$autocomplete-item-line-height$base-line-height
$autocomplete-item-padding0.375rem 1rem
$autocomplete-menu-background#ffffff
$autocomplete-menu-border-radius$base-border-radius
$autocomplete-menu-box-shadow0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02)
$autocomplete-menu-margin0
$autocomplete-menu-max-height200px
$autocomplete-menu-padding0.5rem 0 0.5rem 0
$autocomplete-menu-zindex20

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$autocomplete-item-color#000000
$autocomplete-item-disabled-opacity$base-disabled-opacity
$autocomplete-item-font-size$base-font-size
$autocomplete-item-hover-background-color#f5f5f5
$autocomplete-item-hover-color#000000
$autocomplete-item-line-height$base-line-height
$autocomplete-item-padding0.375rem 1rem
$autocomplete-menu-background#ffffff
$autocomplete-menu-border-radius$base-border-radius
$autocomplete-menu-box-shadow0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02)
$autocomplete-menu-margin0
$autocomplete-menu-max-height200px
$autocomplete-menu-padding0.5rem 0 0.5rem 0
$autocomplete-menu-zindex20

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$autocomplete-menu-max-height200px

See ➜ 📄 Full scss file

Released under the MIT License.