插件描述: 可实现文本框中边输入边检索的功能
下面是根据公司已有项目完成的功能, 不是从零搭建
下载插件
我也不知道下载什么东西, 直接把公司的相关静态文件压缩包上传了
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);
}