bootstrap-typeahead自动补充

时间:2023-03-10 05:50:36
bootstrap-typeahead自动补充

官方文档: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

});

如图:

bootstrap-typeahead自动补充

(此图参考菜鸟教程http://www.runoob.com/try/try.php?filename=bootstrap-typehead)

博客地址:http://www.cnblogs.com/windseek/