基础例子 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');
基础例子 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 | 允许您决定是否自动选择第一个自动填充建议。把自动选择了也就意味着,如果没有被选中,输入不明确 enter 或 tab 就默认第一个自动填充。 |
选择后 | 方法 | $.noop() | 回调函数在选定项目后执行。如果有任何参数,它将获取当前参数中的活动项。 |
延迟 | 整形 | 0 | 在lookups之间添加延迟 |
添加项目 | JSON 对象 | false | 将项目添加到列表的结尾,例如“新条目”。可以在数据列表中未找到项时弹出对话框。例子: http://cl.ly/image/2u170I1q1G3A/addItem.png |