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);
    }