# Autocomplete
Extended input that provide suggestions while the user types
# 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 |
← Introduction Button →