官方文档:https://github.com/bassjobsen/Bootstrap-3-Typeahead
这个是基于bootstrap的typeahead与基于jquery的jquery-Typeahead不一样
.html
<input type="text" name="companyFullName" autocomplete="off" data-provide="typeahead" data-fv-notempty="true"
class="typeahead form-control input-sm" placeholder="企业名称"">
.js
$('.typeahead').typeahead({
source: function (query,process) {
var $inputcompanyfullnameval=$inputcompanyfullname.val();
var data={"companyName":$inputcompanyfullnameval};//传递输入框的值,给后台进行模糊查询,每次返回查询后的数据
return $.ajax({
url : $("base").attr("href")+"/customer/role/entitysearch",
type : "POST",
contentType : "application/json",
dataType: "json",
data :JSON.stringify(data),
success: function (data) {
var result = to_Array(data.data);
resultData = data.data;
return process(result);
}
});
},
items:10, //每页显示十条
showHintOnFocus:true, //当鼠标点击时就显示前十条
autoSelect:false
});
如图:
(此图参考菜鸟教程http://www.runoob.com/try/try.php?filename=bootstrap-typehead)
博客地址:http://www.cnblogs.com/windseek/