Jquery Ui AutoComplete自动填写的功能
用到的jquery 和jquery ui 的版本如下:
jQuery v1.12.4
jQuery UI - v1.11.0
有部分版本会有一些这样那样的问题,具体原因未深究。
jquery 的代码如下
$("#id_customer").autocomplete({
source:function (request,response) {
var findResult = [];
$.ajax({
url:"/ips/get_customername_list/",
data:{"term":request.term},
type:'GET',
success:function(data){
data = JSON.parse(data);
console.log(data);
var search_cus = request.term;
findResult = $.grep(data,function(value,index){
return value.indexOf(search_cus) > -1;
});
response(data);
}
});
}
})
ajax到后台获取的数据
后台返回的数据格式是一个数组:['data1','data2','data3'........'data100']
有一些需要修改的css样式,具体根据自己的情况调整:
.ui-menu {
width: 100px;
list-style: none;
margin-left: -50px;
padding-left:0px ;
}
.ui-menu .ui-menu-item{
background-color: #fff;
height: 25px;
line-height: 25px;
text-indent: 10px;
}
.ui-menu .ui-menu-item:hover{
color:#fff;
background-color: #1b6d85;
}
.ui-menu .ui-state-focus{
color:#fff;
background-color: #1b6d85;
}