mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
88 lines
7.9 KiB
Markdown
88 lines
7.9 KiB
Markdown
|
---
|
||
|
|
title: Autocomplete
|
||
|
|
lang: 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.
|
||
|
|
|
||
|
|
input/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.
|
||
|
|
|
||
|
|
input/autocomplete-template
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Remote search
|
||
|
|
|
||
|
|
Search data from server-side.
|
||
|
|
|
||
|
|
:::demo
|
||
|
|
|
||
|
|
input/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 | — |
|