前台js
<style>
.ui-autocomplete {
z-index:99999 !important;
max-height: 100px;
overflow-y: auto;
/* 防止水平滚动条 */
overflow-x: hidden;
z-index://设定下拉框的优先级
}
* html .ui-autocomplete {
height: 100px;
}
</style>
jquery-1.9.1.js
jquery-ui-1.10.3.min.js
<script th:inline="javascript">
/* <![CDATA[*/
$("#bankName").autocomplete({
source:function(request,response){
var name =$("#bankName1").val()+$("#bankName").val();
$.ajax({
type:"POST",
url:"cdzy/enCustomerUIAction/findBankCodeBy",
dataType : "json",
cache : false,
async : false,
data : {
name:name// 每页显示多少行
},
success : function(json) {
var data = eval (json);//json数组
response($.map(data,function(item){
return {
label:item.bankNameInfo,//下拉框显示值
value:item.name,//选中后,填充到input框的值
id:item.bankCodeInfo//选中后,填充到id里面的值
}
}));
}
});
},
delay: 10,//延迟100ms便于输入
select : function(event, ui) {
$("#bankUnionNo").val(ui.item.id);//取出在return里面放入到item中的属性
},
scroll:true,
pagingMore:true,
max:5000
});
/* ]]>*/
</script>
后台代码可以返回分页数据也可以返回对象的list的集合 ,上面的例子中是返回的对象的list的结合,如果返回的十分也数据
要把rows拿出来再次处理,eval(eval(data.rows))
后台代码省略……..