首页 > 代码库 > 专注UI——实用技术：模糊搜索

专注UI——实用技术：模糊搜索

2024-07-29 04:25:19   221人阅读

        在现在的项目中，需要做模糊搜索，在以前技术的基础上很快得完成了第一版，大家先看看第一版的效果，我们一会做评论：

初级：

        

 

        我们可能部分源码（附件中会有全部源码）

<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=http://www.mamicode.com/"jquery-1.8.3.js" type="text/javascript"></script>>
 
简单升级：
<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("未知");			}						//一个用户拼装为一个按钮，按钮按下给页面输入框同步输入（仿百度）			result = result + "<input type='button' Style='background-color:white;border:0;width:100%'  id='" + listForQuerty.get(i).getEmployeeGuid() +"' value=http://www.mamicode.com/'"+listForQuerty.get(i).getEmployeeFullname()+"--("+listForQuerty.get(i).getEmployeeDeptname() +")' onclick='onClickUserName(this)' />
" ;>

 
 细节调整：
//鼠标经过结果背景为灰色——模糊搜索用					function Over(o){o.style.backgroundColor='#BBB'; }					//鼠标划出结果背景为白色——模糊搜索用					function Out(o){o.style.backgroundColor='#FFF'; }

 
//后台代码：//一个用户拼装为一个按钮，按钮按下给页面输入框同步输入（仿百度）			result = result + "<input type='button' Style='background-color:white;border:0;width:100%'  id='" + listForQuerty.get(i).getEmployeeGuid() +"' value=http://www.mamicode.com/'"+listForQuerty.get(i).getEmployeeFullname()+"--("+listForQuerty.get(i).getEmployeeDeptname() +")' onclick='onClickUserName(this)' onm ouseover=Over(this); onm ouseout=Out(this); />
" ;>

 

 
 
 
专注UI——实用技术：模糊搜索


联系
我们