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
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
expandedClass | Class of the autocomplete menu expanded. | expanded | ||
inputClasses | Classes to apply on internal input. More detail here | |||
itemClass | Class of the menu items. | |||
itemEmptyClass | Class of the menu empty placeholder item. | |||
itemFooterClass | Class of the menu footer item. | |||
itemGroupTitleClass | Class of the menu items group title. | |||
itemHeaderClass | Class of the menu header item. | |||
itemHoverClass | Class of the menu items on hover. | |||
menuClass | Class of the autocomplete menu. | |||
menuPositionClass | Class of the autocomplete menu position. | menu-position | auto | |
rootClass | Class of the root element. |
Autocomplete component
html
<o-autocomplete></o-autocomplete>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
animation | Transition name to apply on dropdown list | string | - | From config: autocomplete: { |
appendToBody | Append autocomplete content to body | boolean | - | |
autocomplete | Native options to use in HTML5 validation | string | - | |
checkInfiniteScroll | Makes the component check if list reached scroll end and emit infinite-scroll event. | boolean | - | |
clearIcon | Icon name to be added on the clear button | string | - | From config: autocomplete: { |
clearOnSelect | Clear input text on select | boolean | - | |
clearable | Add a button/icon to clear the inputed text | boolean | - | |
confirmKeys | Array 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'] |
customFormatter | Function to format an option to a string for display in the input as alternative to field prop) | func | - | |
data | Options / suggestions | array | - | [] |
debounceTyping | Number of milliseconds to delay before to emit typing event | number | - | |
expanded | Makes input full width when inside a grouped or addon field | boolean | - | |
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' |
groupField | Property of the object (if <code>data</code> is array of objects) to use as display text of group | string | - | |
groupOptions | Property of the object (if <code>data</code> is array of objects) to use as key to get items array of each group, optional | string | - | |
icon | Icon name to be added | string | - | |
iconPack | Icon pack to use | string | mdi , fa , fas and any other custom icon pack | |
iconRight | Icon name to be added on the right side | string | - | |
iconRightClickable | Clickable icon right if exists | boolean | - | |
itemTag | Menu item tag name | string | Component | - | From config: autocomplete: { |
keepFirst | The first option will always be pre-selected (easier to just hit enter or tab) | boolean | - | |
keepOpen | Keep open dropdown list after select | boolean | - | |
maxHeight | Max height of dropdown content | string|number | - | |
maxlength | Same as native maxlength, plus character counter | number|string | - | |
menuPosition | Position of dropdown | string | auto , top , bottom | 'auto' |
menuTag | Menu tag name | string | Component | - | From config: autocomplete: { |
openOnFocus | Open dropdown list on focus | boolean | - | |
override | boolean | - | ||
rounded | Makes the element rounded | boolean | - | |
selectOnClickOutside | Trigger the select event for the first pre-selected option when clicking outside and <code>keep-first</code> is enabled | boolean | - | |
selectableFooter | Allows the footer in the autocomplete to be selectable | boolean | - | |
selectableHeader | Allows the header in the autocomplete to be selectable | boolean | - | |
size | Vertical size of input, optional | string | small , medium , large | |
statusIcon | Show status icon using field and variant prop | boolean | - | From config: { |
type | Input type | string | - | 'text' |
useHtml5Validation | Enable html 5 native validation | boolean | - | From config: { |
v-model | number|string | - | ||
validationMessage | The message which is shown when a validation error occurs | string | - |
Events
Event name | Properties | Description |
---|---|---|
icon-click | ||
blur | ||
focus | ||
invalid | ||
update:modelValue | ||
select | selected Object - selected optionevent Event - native event | |
select-header | ||
select-footer | ||
infinite-scroll | ||
typing | ||
icon-right-click |
Slots
Name | Description | Bindings |
---|---|---|
header | ||
group | ||
default | ||
empty | ||
footer |
Sass variables
Current theme ➜ Oruga Base
SASS Variable | Default |
---|---|
$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-padding | 0.375rem 1rem |
$autocomplete-menu-background | #ffffff |
$autocomplete-menu-border-radius | $base-border-radius |
$autocomplete-menu-box-shadow | 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02) |
$autocomplete-menu-margin | 0 |
$autocomplete-menu-max-height | 200px |
$autocomplete-menu-padding | 0.5rem 0 0.5rem 0 |
$autocomplete-menu-zindex | 20 |
See ➜ 📄 Full scss file
Current theme ➜ Oruga Full
SASS Variable | Default |
---|---|
$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-padding | 0.375rem 1rem |
$autocomplete-menu-background | #ffffff |
$autocomplete-menu-border-radius | $base-border-radius |
$autocomplete-menu-box-shadow | 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02) |
$autocomplete-menu-margin | 0 |
$autocomplete-menu-max-height | 200px |
$autocomplete-menu-padding | 0.5rem 0 0.5rem 0 |
$autocomplete-menu-zindex | 20 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
The theme does not have any custom variables for this component.
Current theme ➜ Bootstrap
SASS Variable | Default |
---|---|
$autocomplete-menu-max-height | 200px |
See ➜ 📄 Full scss file