自动完成/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 选项

手动初始化

var autocomplete = UIkit.autocomplete(element, { /* options */ });

事件