mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
7.9 KiB
7.9 KiB
title | lang |
---|---|
Autocomplete | en-US |
Autocomplete
You can get some recommended tips based on the current input.
:::demo Autocomplete component provides input suggestions. The fetch-suggestions
attribute is a method that returns suggested input. In this example, querySearch(queryString, cb)
returns suggestions to Autocomplete via cb(data)
when suggestions are ready.
autocomplete/autocomplete
:::
Custom template
Customize how suggestions are displayed.
:::demo Use scoped slot
to customize suggestion items. In the scope, you can access the suggestion object via the item
key.
autocomplete/autocomplete-template
:::
Remote search
Search data from server-side.
:::demo
autocomplete/remote-search
:::
Autocomplete Attributes
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
placeholder | the placeholder of Autocomplete | string | — | — |
clearable | whether to show clear button | boolean | — | false |
disabled | whether Autocomplete is disabled | boolean | — | false |
value-key | key name of the input suggestion object for display | string | — | value |
icon | icon component | string / Component | — | — |
model-value / v-model | binding value | string | — | — |
debounce | debounce delay when typing, in milliseconds | number | — | 300 |
placement | placement of the popup menu | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to Autocomplete |
Function(queryString, callback) | — | — |
popper-class | custom class name for autocomplete's dropdown | string | — | — |
trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
name | same as name in native input |
string | — | — |
select-when-unmatched | whether to emit a select event on enter when there is no autocomplete match |
boolean | — | false |
label | label text | string | — | — |
prefix-icon | prefix icon class | string / Component | — | — |
suffix-icon | suffix icon class | string / Component | — | — |
hide-loading | whether to hide the loading icon in remote search | boolean | — | false |
popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean | - | false |
teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
highlight-first-item | whether to highlight first item in remote search suggestions by default | boolean | — | false |
Autocomplete Slots
Name | Description |
---|---|
prefix | content as Input prefix |
suffix | content as Input suffix |
prepend | content to prepend before Input |
append | content to append after Input |
Autocomplete Scoped Slot
Name | Description |
---|---|
— | Custom content for input suggestions. The scope parameter is { item } |
Autocomplete Events
Event Name | Description | Parameters |
---|---|---|
select | triggers when a suggestion is clicked | suggestion being clicked |
change | triggers when the icon inside Input value change | (value: string | number) |
Autocomplete Methods
Method | Description | Parameters |
---|---|---|
focus | focus the input element | — |