# 自动完成/Autocomplete 创建允许在输入时从预生成列表中进行选值的输入框。 ## 用法 要使用这个组件，需要添加 `.uk-autocomplete` 类到一个包含 `input` 元素的 `&lt;div&gt;` 中。为了使自动完成输入框所需要的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  提示 尝试输入这些词语： Hamburg, New York, Moscow or Amsterdam. ### Markup ``` <div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}"> <input type="text"> </div> ``` * * * ## 自定义模板 你还可以通过创建自定义模板使结果以不同的形式显示出来。 ### Example  ### Markup ``` <div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}"> <input type="text"> <script type="text/autocomplete"> <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results"> {{~items}} <li data-value="{{ $item.value }}"> <a> {{ $item.title }} <div>{{{ $item.text }}}</div> </a> </li> {{/items}} </ul> </script> </div> ``` ## 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 | 自动完成下拉菜单显示时触发 |