• jQuery Autocomplete


    插件描述: 可实现文本框中边输入边检索的功能

     下面是根据公司已有项目完成的功能, 不是从零搭建

     

    下载插件

    我也不知道下载什么东西, 直接把公司的相关静态文件压缩包上传了
    
    https://files.cnblogs.com/files/jkfeng/autocomplete.zip

    引入

    <%-- autocomplete框架CSS引入 --%>
    <link rel="stylesheet" type="text/css" href="${basePath}/scripts/autocomplete/jquery.autocomplete.css" />
    
    <%-- autocomplete框架引入 --%>
    <script type='text/javascript' charset="UTF-8" src='${basePath}/scripts/autocomplete/jquery.autocomplete.js'></script>
    <script type="text/javascript" charset="UTF-8" src="${basePath}/scripts/autocomplete/autocomplete.js"></script>

    前端代码

    //HTML文本框
    <td style="8px" class="text_cx" colspan="1">         
             字典代码:
             <s:textfield id="queryCode" name="configBean.queryCode"  cssClass="box_cangdan" cssStyle="170px" />
    </td> 
    
    
    
    //文档加载后执行的js
    $(function(){
        //配置参数, 为了更通用, 此处将部分参数传递到后面的操作方法
        var options = {
                "mustMatch" : false,
                "minChars": 0,        // 开始查找的最少字符数
                "width": 170,         // 下拉框宽度
                "max":20,             // 最多显示的匹配项数
                "mustMatch": false,    // 输入框值必须符合待选项
                "matchCase" : false,    // 匹配大小写
                "matchContains": true,
                "autoFill": false
                };
        
        //字典代码
        findTDictionaryCodes(["queryCode"], options);
    });
    
    
    //字典配置 - 获取字典名称代码
    function findTDictionaryCodes(/*array*/ idArray, options){
        $(document).ready(function(){
            var actionUrl = getAbsoluteURL("/findTDictionaryCodes.action");
            $.getJSON(actionUrl, function(data) {
                var array = [];
                $.each(idArray, function(i, n) {
                            array.push($("#" + n));
                        });
                autocompleteShowNameReturnName(array, data, options);
            });
        });
    
    
    //上面定义的数组options会覆盖opt中的参数
    function autocompleteShowNameReturnName(objArray, data, options){
        var opt = { minChars: 0,        // 开始查找的最少字符数
                     130,         // 下拉框宽度
                    max:20,             // 最多显示的匹配项数
                    mustMatch: true,    // 输入框值必须符合待选项
                    matchCase : true,    // 匹配大小写
                    matchContains: true,
                    autoFill: false,
                    formatItem: function(row, i, max) {
                        return row.name ;
                    },
                    formatMatch: function(row, i, max) {
                        return row.name;
                    },
                    formatResult: function(row) {
                        return row.name;
                    }
                };
                $.extend(opt, options);
                $.each(objArray, function(i, element){
                        $(element).autocomplete(data, opt);
                    }
        );
    }
    
    
    
    //Java后台
        //定义属性(以及setter/getter)
        private List<Map<String,Object>> validateExists = new ArrayList<Map<String,Object>>();
    
        @Action(value = "findTDictionaryCodes",
                results = {
                        @Result(name = "success", type = "json", params= {"root","validateExists"})}
                )
        public String findTDictionaryCodes(){
            try {
                validateExists = autocompleteService.findTDictionaryCodes();
            } catch (Exception e) {
                log.error("[Action findTDictionaryCodes Exception message]: "+e.getMessage(), e);
                e.printStackTrace();
            }
            return SUCCESS;
        }
    }
    
    
    //如果返回的是对象怎么处理List<User>
      Map<String, Object> map = new HashMap<String, Object>();
      List<TGrantorConfigInfo> info =    dfsService.getTGrantorConfigInfo(platformCode);
      for (TGrantorConfigInfo config : info) {     map = new HashMap
    <String, Object>(); //map.put("value", config.getPlatformCode()); map.put("name", config.getGrantorName()); validateExists.add(map);
    }
  • 相关阅读:
    java实现第五届蓝桥杯六角幻方
    java实现第五届蓝桥杯六角幻方
    java实现第五届蓝桥杯六角幻方
    java实现第五届蓝桥杯海盗分金币
    java实现第五届蓝桥杯海盗分金币
    java实现第五届蓝桥杯海盗分金币
    java实现第五届蓝桥杯海盗分金币
    java实现第五届蓝桥杯海盗分金币
    jQuery异步上传文件
    关于心跳ajax请求pending状态(被挂起),stalled时间过长的问题。涉及tcp连接异常。
  • 原文地址:https://www.cnblogs.com/jkfeng/p/11890947.html
Copyright © 2020-2023  润新知