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

在如今的项目中。须要做模糊搜索，在曾经技术的基础上非常快得完毕了第一版。大家先看看第一版的效果，我们一会做评论：

0基础：

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

<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的优化上。应该在同意的范围内不遗余力地替用户想，替用户做。就像我刚进这家公司时一位同事说的一样，让用户多想一点，多做一步，用户都会生气！

附件（源代码）：

0基础：

<!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/>" ;