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

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

专注UI——有用技术：模糊搜索的更多相关文章

  1. MSDN 杂志：UI 前沿技术 - WPF 中的多点触控操作事件

    原文  MSDN 杂志:UI 前沿技术 - WPF 中的多点触控操作事件 UI 前沿技术 WPF 中的多点触控操作事件 Charles Petzold 下载代码示例 就在过去几年,多点触控还只是科幻电 ...

  2. 青云QingCloud业内率先支持云端全面透明代理功能 | SDNLAB | 专注网络创新技术

    青云QingCloud业内率先支持云端全面透明代理功能 | SDNLAB | 专注网络创新技术 青云QingCloud业内率先支持云端全面透明代理功能

  3. 这是一个专注于电脑技术、软件应用、互联网、嵌入式，电子技术行业等的原创IT博客

    http://www.choovin.com/ 这是一个专注于电脑技术.软件应用.互联网.嵌入式,电子技术行业等的原创IT博客

  4. IOS UI 设计 技术

    AutoLayout AutoLayout是一种基于约束的,描述性的布局系统. 程序员—-(cgrect)—>frame(center+bounds)    =====>   程序员—(N ...

  5. UI自动化技术在高德的实践

    一.背景汽车导航作为ToB业务,需要满足不同汽车厂商在功能和风格上体现各自特色的需求.针对这种情况,传统的UI开发方式,基本上是一对一的特别定制.但是这种方式动辄就要500~600人日的工作量投入,成 ...

  6. UI设计技术分享：教你几个设计技巧让老板对你的设计赞不绝口

    我们做任何设计都离不开大小与重复的运用,这样能使我们的设计更加理性和科学,经得起推敲,那么我们一起来探讨下如何在产品设计中运用这一方法. 为什么大的物体更吸引眼球    ▲如上图所示,a球会比右边b球 ...

  7. SpringMVC 理论与有用技术（一） 简单、有用、易懂的几个实例

    SpringMVC先来看一下百度百科中的定义; Spring MVC属于SpringFrameWork的兴许产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应 ...

  8. 专注UI——是alert（）打败了你！

    在上家公司.常常在页面上写aler()提示代码.没有认为有什么,好寻常.认为提示就本来应该是这种,可是,当我到了这家公司.在測试的时候,由于測试人员看到了一个aler弹出框.结果我的页面被退回重写,后 ...

  9. UI Automation技术获取cmd或Powershell命令提示符窗口的实时内容

    事先打开的Powershell或cmd窗口中的文本,用其他方式难以拿到.但是用UI Automation可以轻松获取.本工具在窗体上加入了一个Timer控件,每秒钟都查找桌面上是否有Powershel ...

随机推荐

  1. 创建服务类PO

    转载:https://blogs.sap.com/2014/03/04/creating-a-simple-service-po-using-bapipocreate1bapipochange/ Cr ...

  2. BZOJ 3173: [Tjoi2013]最长上升子序列( BST + LIS )

    因为是从1~n插入的, 慢插入的对之前的没有影响, 所以我们可以用平衡树维护, 弄出最后的序列然后跑LIS就OK了 O(nlogn) --------------------------------- ...

  3. 通过 Spring RestTemplate 调用带请求体的 Delete 方法（Delete With Request Body）

    Spring 框架的RestTemplate 类定义了一些我们在通过 java 代码调用 Rest 服务时经常需要用到的方法,使得我们通过 java 调用 rest 服务时更加方便.简单.但是 Res ...

  4. Swift - 同步请求获取网络数据

    使用NSURLConnection可以实现http通信.它提供了异步请求和同步请求两种通信方式. 注意:同步请求数据会造成主线程阻塞,必须请求结束后用户才能做其他的操作,所有通常在请求大数据或者网络不 ...

  5. android源码地址及下载介绍

      git clone https://android.googlesource.com/device/common.git  git clone https://android.googlesour ...

  6. 重操JS旧业第八弹：面向对象与继承

    js里面没有语言语法层面的继承机制,但这并不意味着js就不能实现继承,利用js属性和方法动态性来模拟实现继承,通过总结大概有如下方法实现: 1 原型链继承 我们知道原型在对象中扮演着重要的角色,函数本 ...

  7. 文本框、文本编辑框、按钮——axure线框图部件库介绍

    1. 与文本面板组合设计表单 文本框主要是在设计页面表单的时候,用的最多,通过与文本面板的组合使用,下面我们通过文本面板和文本框设计了一个简单的注册表单 对于,文本框中的文字,只需要双击即可编辑文字 ...

  8. cPickle.so:: PyUnicodeUCS2_DecodeUTF8

    cPickle.so:: PyUnicodeUCS2_DecodeUTF8错误 Python编译的参数,和Python module(mod_wsgi, pymodwsgi)编译参数不一,导致一些un ...

  9. 改变TPageControl的活动标签颜色

    设置PageControl的owndraw属性为TRUE. procedure TForm1.pgc1DrawTab(Control: TCustomTabControl; TabIndex: Int ...

  10. 8天玩转并行开发——第八天 用VS性能向导解剖你的程序

    原文 8天玩转并行开发——第八天 用VS性能向导解剖你的程序 最后一篇,我们来说说vs的“性能向导",通常我们调试程序的性能一般会使用Stopwatch,如果希望更加系统的了解程序,我们就需 ...