jquery-ui的autocomplete的使用方法
阿新 • • 發佈:2019-01-10
前臺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))
後臺程式碼省略……..