前臺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))
後臺程式碼省略……..