Question

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

用法

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

注意 使用此组件需要额外添加 autocomplete.css 文件，在css/components文件夹中。此组件需要额外添加 autocomplete.js 文件，在js/components文件夹中。

<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 选项

选项	可用值	默认值	描述
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	自动完成下拉菜单显示时触发