自动填充

自动填充 - Bootstrap Typeahead
自动填充 - Typeahead
Typeahead 在用户填写表单时,为用户提供提示或数据。Bootstrap 允许您创建外观好看的 Typeahead,而且,它易于扩展,您可以不需要太大的改动就可以加强它的功能。这儿可以找到完整的文档: https://github.com/bassjobsen/Bootstrap-3-Typeahead
基础例子 - data-*

基础例子 via data attributes: (type 'item...')

<input type="text"
data-provide="typeahead"
data-source='["item 1","item 2","item 3"]'
placeholder="item..."
class="form-control" />
加载集合

从json文件加载集合 (type 'Arg...')

$.get('js/api/typehead_collection.json', function(data){
    $(".typeahead_2").typeahead({ source:data.countries });
},'json'); 
基础例子 - javascript

基础例子 via javascript (type 'item...')

$('.typeahead_1').typeahead({
    source: ["item 1","item 2","item 3"]
}); 
加载更复杂对象

加载JSON对象所需的“name”属性 (type 'Afg...')

$('.typeahead_3').typeahead({
    source: [
        {"name": "Afghanistan", "code": "AF", "ccn0": "040"},
        {"name": "Land Islands", "code": "AX", "ccn0": "050"},
        {"name": "Albania", "code": "AL","ccn0": "060"},
        {"name": "Algeria", "code": "DZ","ccn0": "070"}
    ]
}); 
选项

可以通过数据属性或JavaScript忽略掉选项。对于数据属性,将选项名称附加到 data-, 当做 data-source="".

名称 类型 默认 描述
资源 数组, 方法 [ ] 要查询的数据源可以是一个字符串数组,用一个名称属性或功能的JSON对象的数组。函数接受两个参数 query 输入字段中的值和process 回调。该函数可以通过直接或异步返回数据源同步使用 process 回调的单一参数。
项目 数字 8 在下拉列表中显示选项的最大数量。也可以设置为'所有'
最小程度 数字 1 最小字符长度时触发自动完成功能。您可以将其设置为0,所以即使当查找空文本时函数也会被调用,也会触发自动完成功能。
显示提示事件 判断 false 只要输入的是焦点事件就会被显示出来。
滚动高度 数字, 方法 0 可滚动父容器向下滚动一定的像素数 (滚动的视图)。
匹配器 方法 不区分大小写 用于确定查询是否匹配的方法。接受一个自变量 item 用于测试查询,访问当前查询 this.query。返回 true 如果匹配
分类 方法 精确匹配,
不区分大小写
用于给自动填充结果排序的方法。接收单一论点 items 有typeahead的范围实例参考当前查询this.query
更新 方法 返回选择项目 用于返回选定项目的方法。接受一个自变量 item具有Typeahead范围实例。
突出 方法 突出所有默认匹配 用于突出显示自动完成结果的方法。接受单一论点 item 具有Typeahead范围实例。返回html.
显示文本 方法 项目名 || 项目 用于获取源项文本表示的方法。接受单一论点 item 具有Typeahead范围实例。返回字符串。
自动选择 判断 true 允许您决定是否自动选择第一个自动填充建议。把自动选择了也就意味着,如果没有被选中,输入不明确 entertab 就默认第一个自动填充。
选择后 方法 $.noop() 回调函数在选定项目后执行。如果有任何参数,它将获取当前参数中的活动项。
延迟 整形 0 在lookups之间添加延迟
添加项目 JSON 对象 false 将项目添加到列表的结尾,例如“新条目”。可以在数据列表中未找到项时弹出对话框。例子: http://cl.ly/image/2u170I1q1G3A/addItem.png