标签:
在如今的项目中。须要做模糊搜索,在曾经技术的基础上非常快得完毕了第一版。大家先看看第一版的效果,我们一会做评论:
我们可能部分源代码(附件中会有所有源代码)
<span style="font-size:18px;"> <div style="position:absolute;background-color:white;border-style:solid;border-width:1px;padding-top:2px;"> <table> <thead> <tr><th>姓名</th><th>性别</th></tr> </thead> <tbody> <tr><td>张山</td><td>男</td></tr> <tr><td>李四</td><td>女</td></tr> <tr><td>王五</td><td>男</td></tr> <tr><td>找六</td><td>男</td></tr> <tr><td>Rain</td><td>男</td></tr> <tr><td>MAXMAN</td><td>女</td></tr> <tr><td>王六</td><td>男</td></tr> <tr><td>李字</td><td>女</td></tr> <tr><td>李四</td><td>男</td></tr> </tbody> </table> <br/> </div> </span>
大家非常明显就能看出来。我们泄露了数据,在界面上将数据泄露给了用户。这是非常危急的,经过熟悉的ajax技术改造,我们立即出了第二版:
可是这样,測试给提了两个bug:1。选中项没有标记;2。输入汉字没有反应
针对这些我们又添加了代码:
为了解决汉字的问题,我们将触发事件由onkeypress()更改为onpropertychange()
差别:onpropertychange是检測属性的变化。这时汉字的变化是属性value的变化。就攻克了onkeypress仅仅识别英文与数字的缺陷。
通过我们自检与负责的測试。我们将UI上的一个小功能,模糊搜索更改了N次,这恰恰符合了用户至上的理念。我们应该加深一个理念,对于用户来说,界面就是所有,在对UI的优化上。应该在同意的范围内不遗余力地替用户想,替用户做。就像我刚进这家公司时一位同事说的一样,让用户多想一点,多做一步,用户都会生气!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <!-- 引入jQuery --> <script src="jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#filterName").keyup(function(){ $("table tbody tr") .hide() .filter(":contains('"+( $(this).val() )+"')") .show(); }).keyup(); }) </script> </head> <body> <div> <br/> 筛选: <div > <input id="filterName" /> <div style="position:absolute;background-color:white;border-style:solid;border-width:1px;padding-top:2px;"> <table> <thead> <tr><th>姓名</th><th>性别</th></tr> </thead> <tbody> <tr><td>张山</td><td>男</td></tr> <tr><td>李四</td><td>女</td></tr> <tr><td>王五</td><td>男</td></tr> <tr><td>找六</td><td>男</td></tr> <tr><td>Rain</td><td>男</td></tr> <tr><td>MAXMAN</td><td>女</td></tr> <tr><td>王六</td><td>男</td></tr> <tr><td>李字</td><td>女</td></tr> <tr><td>李四</td><td>男</td></tr> </tbody> </table> <br/> </div> <br/> </div> </div> </body> </html>
<td align=center class="module_title_text" style="text-align: right;padding-right: 8px">职工姓名</td> <td> <input type="text" id ="employeeFullnames" name="baseEmployeeForQuery.employeeFullname" size="42" class="module_input_01 " id="" maxlength="20" value="" onkeypress="inputWorkercode(this)" /> <script charset="utf-8" type="text/javascript"> //模糊查询用户 function inputWorkercode(userInput){ //获取用户输入 var name = userInput.value; if(1==1){ $.ajax( { url: "Otherpeople_queryUserByInput_include_json.action", type: "POST", data: jQuery(document.forms[0]).serializeArray(), success: function(resObj) { if(resObj.trim() == ""){ $("#inputQueryUser").hide(); }else{ //将后台返回的html代码增加到结果显示div中 $("#inputQueryUser").html(resObj); $("#inputQueryUser").show(); } } }); } } //用户选中某模糊结果 function onClickUserName(userInputForName){ //结果同步给用户所有名称(显示用) $("#employeeFullnames").val(userInputForName.value); //结果同步给用户id $("#SWorkercode").val(userInputForName.id); //结果同步给用户所有名称 $("#SWorkername").val(userInputForName.value); //结果页隐藏 $("#inputQueryUser").hide(); } //鼠标经过结果背景为灰色——模糊搜索用 function Over(o){o.style.backgroundColor='#BBB'; } //鼠标划出结果背景为白色——模糊搜索用 function Out(o){o.style.backgroundColor='#FFF'; } </script> <!-- <select name="addBOtherpeopleDict.SWorkercode"> <c:forEach items="${list4yg}" var="yh"> <option value="${yh.employeeGuid}">${yh.employeeFullname}</option> </c:forEach> </select> --> </td>
//后台代码: /** * 依据用户输入模糊查询用户 * @return */ public String queryUserByInput(){ //结果集合 List<BaseEmployee> listForQuerty= new ArrayList<BaseEmployee>();; baseEmployeeForQuery.setSWorkercode(null); try{ //模糊查询 listForQuerty = iEmployeeService.getAllEmployee(baseEmployeeForQuery, null, null, 5, 1, 50).getResultList(); }catch(Exception e){ logger.error("queryUserByInput()出错:", e); e.printStackTrace(); } //开发将结果拼装成html代码返回给前台页面 String result = new String() ; //循环拼装html for(int i = 0 ; i< listForQuerty.size() ; i++ ){ if(listForQuerty.get(i).getEmployeeDeptname()==null || listForQuerty.get(i).getEmployeeDeptname().trim()==""){ listForQuerty.get(i).setEmployeeDeptname("未知"); } //一个用户拼装为一个button,button按下给页面输入框同步输入(仿百度) result = result + "<input type='button' Style='background-color:white;border:0;width:100%' id='" + listForQuerty.get(i).getEmployeeGuid() +"' value='"+listForQuerty.get(i).getEmployeeFullname()+"--("+listForQuerty.get(i).getEmployeeDeptname() +")' onclick='onClickUserName(this)' /><br/>" ; } //将html代码返回 ActionContext.getContext().put(JSON_RESULT,result); return SUCCESS; }
//鼠标经过结果背景为灰色——模糊搜索用 function Over(o){o.style.backgroundColor='#BBB'; } //鼠标划出结果背景为白色——模糊搜索用 function Out(o){o.style.backgroundColor='#FFF'; }
//后台代码: //一个用户拼装为一个button,button按下给页面输入框同步输入(仿百度) result = result + "<input type='button' Style='background-color:white;border:0;width:100%' id='" + listForQuerty.get(i).getEmployeeGuid() +"' value='"+listForQuerty.get(i).getEmployeeFullname()+"--("+listForQuerty.get(i).getEmployeeDeptname() +")' onclick='onClickUserName(this)' onmouseover=Over(this); onmouseout=Out(this); /><br/>" ;
标签:
原文地址:http://www.cnblogs.com/lcchuguo/p/5117881.html