Skip to content

Autocomplete

Extended input that provide suggestions while the user types

Examples

Base

Show code

Objects array

Show code

Groups

Show code

Infinite Scroll

Show code

Class props

'Classes applied to the element'

Autocomplete component

Extended input that provide suggestions while the user types

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

Props

Prop nameDescriptionTypeValuesDefault
animationTransition name to apply on dropdown liststring-
From config:
autocomplete: {
  animation: "fade"
}
autocompleteNative options to use in HTML5 validationstring-
From config:
autocomplete: {
  autocomplete: "off"
}
checkScrollMakes the component check if list reached scroll start or end and emit scroll events.boolean-
From config:
autocomplete: {
  checkScroll: false
}
clearIconIcon name to be added on the clear buttonstring-
From config:
autocomplete: {
  clearIcon: "close-circle"
}
clearOnSelectClear input text on selectboolean-
From config:
autocomplete: {
  clearOnSelect: false
}
clearableAdd a button/icon to clear the inputed textboolean-
From config:
autocomplete: {
  clearable: false
}
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)string[]-
From config:
autocomplete: {
  confirmKeys: ["Tab","Enter"]
}
customValidityCustom HTML 5 validation error to set on the form control| string
| ((
currentValue: T | null | undefined,
state: ValidityState,
) => string)
-""
debounceNumber of milliseconds to delay before to emit input eventnumber-
From config:
autocomplete: {
  debounce: 400
}
disabledSame as native input disabledboolean-false
expandedMakes input full width when inside a grouped or addon fieldboolean-false
fieldProperty of the object (if options are an array of objects) to use as display text, and to keep track of selected optionstring-
filterFunction to filter the options based on the input value - default is display text comparison(options: T[], value: string) => T[]-
formatterFunction to format an option to a string for display it in the input (as alternative to field prop)(value: unknown, option: T) => string-
groupFieldProperty of the object (if options are an array of objects) to use as display text of groupstring-
groupOptionsProperty of the object (if options are an array of objects) to use as key to get items array of each groupstring-
iconIcon to be shownstring-
From config:
autocomplete: {
  icon: undefined
}
iconClickableMakes the icon clickableboolean-false
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
autocomplete: {
  iconPack: undefined
}
iconRightIcon to be added on the right sidestring-
From config:
autocomplete: {
  iconRight: undefined
}
iconRightClickableMake the icon right clickableboolean-false
iconRightVariantVariant of right iconstring-
inputThe value of the inner input, use v-model:input to make it two-way bindingstring-""
itemTagMenu item tag nameDynamicComponent-
From config:
autocomplete: {
  itemTag: "div"
}
keepFirstThe first option will always be pre-selected (easier to just hit enter or tab)boolean-
From config:
autocomplete: {
  keepFirst: false
}
keepOpenKeep open dropdown list after selectboolean-
From config:
autocomplete: {
  keepOpen: false
}
maxHeightMax height of dropdown contentstring|number-
From config:
autocomplete: {
  maxHeight: undefined
}
maxlengthSame as native maxlength, plus character counterstring|number-
menuTagMenu tag nameDynamicComponent-
From config:
autocomplete: {
  menuTag: "div"
}
mobileModalDropdown content (items) are shown into a modal on mobileboolean-
From config:
autocomplete: {
  mobileModal: false
}
v-modelThe selected option, use v-model to make it two-way bindingT-
openOnFocusOpen dropdown list on focusboolean-
From config:
autocomplete: {
  openOnFocus: false
}
optionsOptions / suggestionsstring[]|object[]-Default function (see source code)
overrideOverride existing theme classes completelyboolean-
placeholderInput placeholderstring-
positionPosition of the dropdownstringauto, top, bottom
From config:
autocomplete: {
  position: "auto"
}
roundedMakes the element roundedboolean-false
selectOnClickOutsideTrigger the select event for the first pre-selected option when clicking outside and keep-first is enabledboolean-false
selectableFooterAllows the footer in the autocomplete to be selectableboolean-false
selectableHeaderAllows the header in the autocomplete to be selectableboolean-false
sizeSize of the controlstringsmall, medium, large
From config:
autocomplete: {
  size: undefined
}
statusIconShow status icon using field and variant propboolean-
From config:
{
  statusIcon: true
}
teleportAppend the component to another part of the DOM.
Set true to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used.
boolean|string|object-
From config:
autocomplete: {
  teleport: false
}
typeInput typestring-"text"
useHtml5ValidationEnable HTML 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}

Events

Event namePropertiesDescription
icon-clickevent Event - native eventon icon click event
update:modelValuevalue string | object - updated modelValue propmodelValue prop two-way binding
update:inputvalue string - updated input propinput prop two-way binding
inputvalue string - input valueon input change event
selectvalue string | object - selected valueselected element changed event
select-headerevent Event - native eventheader is selected
select-footerevent Event - native eventfooter is selected
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event
icon-right-clickevent Event - native eventon icon right click event
scroll-startthe list inside the dropdown reached the start
scroll-endthe list inside the dropdown reached it's end

Slots

NameDescriptionBindings
headerDefine an additional header
groupOverride the option grpupgroup object - options group
index number - option index
defaultOverride the select optionoption object - option object
value unknown - option value
index number - option index
emptyDefine content for empty state
footerDefine an additional footer

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$autocomplete-item-hover-background-color#f5f5f5

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$dropdown-content-max-height200px

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$autocomplete-menu-max-height200px

See ➜ 📄 Full scss file

Released under the MIT License.