自动完成/Autocomplete
最后更新于:2022-04-01 22:23:24
# 自动完成/Autocomplete
创建允许在输入时从预生成列表中进行选值的输入框。
## 用法
要使用这个组件,需要添加 `.uk-autocomplete` 类到一个包含 `input` 元素的 `<div>` 中。为了使自动完成输入框所需要的JavaScript生效,你还需要添加 `data-uk-autocomplete` 属性。添加 `{source:'PATH/TO/RESULTS'}` 到data属性中,并设置需要用JSON进行格式化的自动完成列表的路径 ([示例](../tests/components/_autocomplete.json))。 [下拉菜单](dropdown.html)会被注入需要显示出来的自动完成建议。你甚至可以用键盘上的上下键来浏览下拉菜单。
注意 使用此组件需要额外添加 `autocomplete.css` 文件,在`css/components`文件夹中。此组件需要额外添加 `autocomplete.js` 文件,在`js/components`文件夹中。
### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3d5e514.jpg)
提示 尝试输入这些词语: Hamburg, New York, Moscow or Amsterdam.
### Markup
```
```
* * *
## 自定义模板
你还可以通过创建自定义模板使结果以不同的形式显示出来。
### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3d6f373.jpg)
### Markup
```
```
## JavaScript 选项
| 选项 | 可用值 | 默认值 | 描述 |
| --- | --- | --- | --- |
| `source` | url, array, callback function | [] | 数据源 |
| `minLength` | integer | 3 | 触发自动完成的最小输入长度 |
| `param` | string | search | 发送ajax请求时的查询名称(Query name) |
| `delay` | integer | 300 | 停止输入后的延时 |
| `flipDropdown` | boolean | false | 翻转显示结果的下拉菜单 |
### 手动初始化
```
var autocomplete = UIkit.autocomplete(element, { /* options */ });
```
### 事件
| 名称 | 参数 | 描述 |
| --- | --- | --- |
| `selectitem.uk.autocomplete` | event, data, acobject | 某个值被选择时触发 |
| `show.uk.autocomplete` | event | 自动完成下拉菜单显示时触发 |
';