通过数据属性的基本示例: (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 (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=""
.
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
source | array, function | [ ] | 要查询的数据源。可能是一个字符串数组,一个具有name属性或函数的JSON对象数组。该函数接受两个参数, query 即输入字段中的值和 process 回调。该函数可以通过 process 回调的单个参数直接或异步返回数据源来同步使用。 |
items | number | 8 | 在下拉列表中显示的最大项目数。也可以设置为“全部” |
minLength | number | 1 | 触发自动填充建议之前所需的最小字符长度。您可以将其设置为0,因此即使在调用查找功能时没有文本时也会显示建议。 |
showHintOnFocus | boolean | false | 一旦输入得到焦点,就可以在适用时显示提示。 |
scrollHeight | number, function | 0 | 可滚动父容器向下滚动的像素数(滚出视口)。 |
matcher | function | case insensitive | 用于确定查询是否匹配项的方法。接受单个参数, item 用于测试查询。访问当前查询 this.query 。true 如果查询是匹配,则返回一个布尔值。 |
sorter | function | exact match, case sensitive, case insensitive |
用于对自动完成结果进行排序的方法。接受单个参数, items 并具有类型头实例的范围。引用当前查询 this.query . |
updater | function | returns selected item | 用于返回所选项目的方法。接受单个参数, item 并具有类型头实例的范围。 |
highlighter | function | highlights all default matches | 用于突出显示自动完成结果的方法。接受单个参数, item 并具有类型头实例的范围。应该返回html |
displayText | function | item.name || item | 用于获取源的项目的文本表示的方法。接受单个参数, item 并具有类型头实例的范围。应该返回一个String。 |
autoSelect | boolean | true | 允许您指定是否自动选择第一个建议。关闭自动选择也意味着如果没有选择 enter 或被 tab 击中,输入将不会被清除。 |
afterSelect | function | $.noop() | 调用功能在选择一个项目后执行。它将当前活动项目置于参数中(如果有)。 |
delay | integer | 0 | 在查找之间增加延迟。 |
addItem | JSON object | false | 将项目添加到列表的末尾,例如“新建条目”。例如,当在数据列表中找不到某个项目时,可以使用该对话框。示例: http://cl.ly/image/2u170I1q1G3A/addItem.png |