element-plus/docs/en-US/component/autocomplete.md
qiang 598f3ab5cd
feat(components): [autocomplete] expose blur event (#8364)
* feat(components): [autocomplete] expose blur event

* docs(components): [autocomplete] update
2022-06-27 13:39:25 +09:00

8.0 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

:::

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
Custom content for input suggestions. The scope parameter is { item }
prefix content as Input prefix
suffix content as Input suffix
prepend content to prepend before Input
append content to append after Input

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
blur blur the input element