bootstrap-typeahead 在用户填写表单时，为用户提供提示或数据。
Bootstrap 允许您创建外观好看的 Typeahead，而且，它易于扩展，您可以不需要太大的改动就可以加强它的功能。
下面来介绍bootstrap3-typpeahead的使用：
1、必须引用两个 JavaScript 文件 jquery.js 和 bootstrap3-typeahead.js
bootstrap3-typeahead.js的下载地址：
官网：https://github.com/bassjobsen/Bootstrap-3-Typeahead/
百度网盘：https://pan.baidu.com/s/1pNsUTuj
2、通过JavaScript
调用$('.typeahead').typeahead()
3、typeahead()详解
(此处取自：http://www.cnblogs.com/shiyu404/p/6344591.html)
参考官方README和其他一些博客的资料，可以了解typeahead函数可以接受的一些参数，这些参数可以通过指定标签属性来传递，
也可以直接在JavaScript中给出。对于标签属性传递参数来说，需要在参数前加上data-，例如data-source="".
下表为官方README文档中参数表格的翻译版本：
| Name | Type | Default | Description |
| source | array, function | [] | 用来查询的数据源。可以是数组或字符串，一个带有name属性的JSON对象的数组集合，或者一个函数。函数可以接受两个参数，query代表输入框中你的输入值（即查询值）,process回调函数。The function may be used synchronously by returning the data source directly or asynchronously via the |
| items | number | 8 | 下拉选项中出现条目的最大数量。也可以设置为“all” |
| minLength | number | 1 | 出发下拉提示的最小长度字符串。可以设置为0，即使没有填写任何内容，也会出现提示。 |
| showHintOnFocus | boolean or "all" | false | 当输入框获得焦点时立刻显示提示。如果设置为true，显示所有匹配项。如果设置为“all”，显示所有提示，并不会按照当前文本过滤。当你需要一个组合框（Combo Box，由文本框和下拉框组成）功能时，可以考虑这个。 |
| scrollHeight | number, function | 0 | Number of pixels the scrollable parent container scrolled down (scrolled out the viewport). |
| matcher | function | case insensitive | 该函数用来确定匹配条目的规则。接受一个参数，item用于测试查询字符串是否匹配。通过当前查询字符串this.query。如果相匹配则返回true |
| sorter | function | exact match, case sensitive, case insensitive |
该函数用来对结果进行排序。接受一个参数items并且具有typeahead实例的作用域，通过this.query得到当前查询。 |
| updater | function | returns selected item | 该函数用来返回选中的条目。接受一个item参数并且具有typeahead实例的作用域。 |
| highlighter | function | highlights all default matches | 用来高亮自动补全的结果。接受一个item参数并且拥有typeahead实例的作用域。应该返回html |
| displayText | function | item.name || item | 用来得到数据源的条目的文本表示。接受一个item参数并且拥有typeahead实例的作用域。应该返回一个字符串。 |
| autoSelect | boolean | true | 允许你决定是否自动选择第一个建议。关闭它意味着如果没有选择任何内容（或Enter或Tab），输入将不会清空。 |
| afterSelect | function | $.noop() | 选择一个条目后的回调函数。It gets the current active item in parameter if any. |
| delay | integer | 0 | 在查找之间添加延迟 |
| appendTo | jQuery element | null | 默认情况下，菜单将会出现在输入元素的之后。使用这个选项来添加菜单到其他div。如果你想使用bootstrap的dropup或者dropdown-menu-right classes，就不要使用它 |
| fitToElement | boolean | false | 如果你希望菜单的大小与其所链接的输入的大小相同，置为true |
| addItem | JSON object | false | 在list的最后添加一个条目，例如“New Entry”。这可能被用到，例如当一个条目在数据集中没有被 |
ajax动态查询
$("#search-platform").typeahead({
source: function (query, process) {
return $.ajax({
url: '/domain/xxxx',
type: 'post',
data: {name: query},
success: function (result) {
return process(result);
},
});
}
});
这里我们只使用了一个source选项，指定一下数据源，通过上表我们了解到source可以是一个带有两个参数的函数，
其两个参数分别为query和process，query是当前输入框中所输入的内容，process是一个回调函数，
它用来将我们得到的结果转换为typeahead组件可以识别的数据。
结合上面一段代码，我们返回的内容是通过ajax请求得到的结果，但是这个结果经过了process进行处理。
ajax动态查询，定制显示内容
上面的需求很简单，但是有的时候要考虑更加完善的情况，比方说现在有一个查询框，是用来查询学生姓名的，考虑问题：
updater
/** * 在选中数据后的操作，这里的返回值代表了输入框的值 * * @param obj * @return 选中后，最终输入框里的值 */ updater: function (obj) { var item = JSON.parse(obj); return item.name; }
最终输入框中我们只让他回填name。
5、实例代码2-本地数据简单示例
html:
/* autocomplete 避免浏览器的自动提示对下拉选项的覆盖操作 */
<input id="local_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm form-control" placeholder="请输入(本地Array数据)" />
Js：
-
var localArrayData = ['beijing', 'shanghai', 'guangzhou', 'sz', 'hangzhou', 'ningbo'];
-
function parseLocalArrayData() {
-
$("#local_data").typeahead({
-
source: localArrayData,//数据源
-
items: 8,//最多显示个数
-
updater: function (item) {
-
return item;//这里一定要return，否则选中不显示，外加调用display的时候null reference错误。
-
},
-
displayText: function (item) {
-
return "选：" + item;//返回字符串
-
},
-
afterSelect: function (item) {
-
//选择项之后的事件 ，item是当前选中的。
-
},
-
delay: 500//延迟时间
-
});
-
$("#look_up_array").click(function () {
-
$("#local_data").typeahead("lookup", '选');
-
});
-
$("#get_value_array").click(function () {
-
var val = $("#local_data").typeahead("getActive");
-
console.log(val);
-
});
-
}
html:
<input id="local_object_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm form-control"placeholder="请输入（本地Object数据）" />
<input type="hidden" id="id"/>
Js:
-
var localObjectData = [{ id: 1, name: 'beijing' }, { id: 2, name: 'shanghai' }, { id: 3, name: 'guangzhou' }, { id: 4,name: 'sz' }];
-
var objMap = {};
-
function parseLocalObjectData() {
-
//typeahead只能处理简单的列表，所以要构造一个array string。名称对应的id放到objMap里面；
-
$("#local_object_data").typeahead({
-
source: function (query, process) {
-
var names = [];
-
$.each(localObjectData, function (index, ele) {
-
objMap[ele.name] = ele.id;
-
names.push(ele.name);
-
});
-
process(names);//调用处理函数，格式化
-
},
-
afterSelect: function (item) {//选中一条数据后的回调函数，此处可以向隐藏域赋值数据id
-
console.log(objMap[item]);//取出选中项的值
-
$("id").val(objMap[item]);
-
}
-
});
-
}
异步调用服务器数据，delay参数就很有用了
html:
<div class="form-group" style="display: none" id="workOrderDiv"> <label class="col-sm-3 control-label no-padding-right"><span style="color: red">*</span>工单:</label> <div class="col-sm-7"> <input name="workOrderSelect" autocomplete="off" class="col-xs-10 required" data-provide="typeahead" placeholder="请输入工单编号"/> <input type="hidden" name="workOrderId"> </div> </div>js:
var nameToIdMap = {};//编码对应的id $('#workModelOrderForm [name="workOrderSelect"]').typeahead({ source: function (query, process) { //query是输入的值 $.ajax({ url: G_CTX_PATH + "/workModel/getOrderList", type: "POST", dataType: "JSON", data: {isSubmit:0,workOrderNum:query}, success: function (msg) { if (msg.status == 200 && msg.data) { var array = []; $.each(msg.data, function (index, ele) { nameToIdMap[ele.workOrderNum] = ele.workOrderid;//键值对保存下来。 array.push(ele.workOrderNum); }); process(array); } } }) }, minLength: 0,//键入字数多少开始补全 showHintOnFocus: "true",//将显示所有匹配项 fitToElement: true,//选项框宽度与输入框一致 items: 'all',//下拉选项中出现条目的最大数量。也可以设置为“all” autoSelect: true,//允许你决定是否自动选择第一个建议 afterSelect: function (item) { console.log(nameToIdMap[item]);//打印对应的id $('#workModelOrderForm [name="workOrderId"]').val(nameToIdMap[item]); }, delay: 500//在查找之间添加延迟 });
