# Autocomplete 自动完成
## 示例
### 触发建议的时机
设置 `suggest-trigger` 来指定触发建议的时机。
[[ demo src="/demo/autocomplete/normal.vue" ]]
### 严格模式
设置 `strict` 属性来指定严格模式,若输入值没有完全匹配建议值,那么在失焦时会清空输入值。
[[ demo src="/demo/autocomplete/strict.vue" ]]
### 自定义搜索逻辑
设置 `match` 属性来自定义自定义高亮逻辑。
设置 `filter` 属性来自定义搜索命中逻辑。
:::tip
`match` 用于高亮显示匹配文本的逻辑;而 `filter` 是控制是否命中。默认情况下 `filter` 会过滤掉未被 `match` 匹配的节点,且将包含非叶子节点。如希望搜索结果中都是叶子节点,可通过重写 `filter` 过滤掉非叶子节点。
:::
[[ demo src="/demo/autocomplete/custom.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datasource`` | `Array=` | `[]` | [^datasource] |
| ``value`` | `*` | - | [^prop-value] |
| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑,默认进行大小写不敏感的子串匹配。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑。 |
| ``strict`` | `boolean=` | `false` | 建议下拉面板关闭时,若输入值没有完全匹配建议值,那么会清空输入值。 |
| ``suggest-trigger`` | `string | Array=` | `'input'` | 触发建议下拉面板的时机,可用值有:`'input'`、`'focus'`。 |
| ``placeholder`` | `string=` | | 输入占位符。 |
| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^datasource
数据源数组,项目为 `Object` 时字段为 `{label, value, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `value` | `string` | 节点对应的值,一般是页内 hash, 如 `#button` 。 |
| `children` | `Array