自动完成

创建允许用户在键入时从预生成值列表中选择的输入。

用法

要应用此组件，请将 .uk-autocomplete 类添加到 <div> 元素中，该元素围绕一个 input 元素。 要为自动完成输入启用必要的 JavaScript，您还需要添加 data-uk-autocomplete 属性。 将 {source:'PATH/TO/RESULTS'} 添加到数据属性，并设置自动完成列表的路径，该列表需要以 JSON 格式格式化 (示例)。将注入 下拉组件中的下拉列表以显示自动完成建议。您甚至可以使用键盘的向上和向下键在下拉列表中导航。

示例

注意 输入汉堡、纽约、莫斯科或阿姆斯特丹。

标记

<div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}">
    <input type="text">
</div>

自定义模板

您还可以创建自定义模板以不同的方式显示结果。

示例

标记

<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 */ });

事件