jquery-ui的autocomplete的使用方法

前台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">
    /* 
    $("#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))
后台代码省略……..

你可能感兴趣的:(前端)