自动完成/Autocomplete

创建允许在输入时从预生成列表中进行选值的输入框。

用法

要使用这个组件,需要添加 .uk-autocomplete 类到一个包含 input 元素的 <div> 中。为了使自动完成输入框所需要的JavaScript生效,你还需要添加 data-uk-autocomplete 属性。添加 {source:'PATH/TO/RESULTS'} 到data属性中,并设置需要用JSON进行格式化的自动完成列表的路径 (示例)。 下拉菜单会被注入需要显示出来的自动完成建议。你甚至可以用键盘上的上下键来浏览下拉菜单。

注意 使用此组件需要额外添加 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 自动完成下拉菜单显示时触发