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//在查找之间添加延迟 });