专注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/>" ;
专注UI——有用技术：模糊搜索的更多相关文章
- MSDN 杂志：UI 前沿技术 - WPF 中的多点触控操作事件
原文 MSDN 杂志:UI 前沿技术 - WPF 中的多点触控操作事件 UI 前沿技术 WPF 中的多点触控操作事件 Charles Petzold 下载代码示例 就在过去几年,多点触控还只是科幻电 ...
- 青云QingCloud业内率先支持云端全面透明代理功能 | SDNLAB | 专注网络创新技术
青云QingCloud业内率先支持云端全面透明代理功能 | SDNLAB | 专注网络创新技术 青云QingCloud业内率先支持云端全面透明代理功能
- 这是一个专注于电脑技术、软件应用、互联网、嵌入式，电子技术行业等的原创IT博客
http://www.choovin.com/ 这是一个专注于电脑技术.软件应用.互联网.嵌入式,电子技术行业等的原创IT博客
- IOS UI 设计 技术
AutoLayout AutoLayout是一种基于约束的,描述性的布局系统. 程序员—-(cgrect)—>frame(center+bounds) =====> 程序员—(N ...
- UI自动化技术在高德的实践
一.背景汽车导航作为ToB业务,需要满足不同汽车厂商在功能和风格上体现各自特色的需求.针对这种情况,传统的UI开发方式,基本上是一对一的特别定制.但是这种方式动辄就要500~600人日的工作量投入,成 ...
- UI设计技术分享：教你几个设计技巧让老板对你的设计赞不绝口
我们做任何设计都离不开大小与重复的运用,这样能使我们的设计更加理性和科学,经得起推敲,那么我们一起来探讨下如何在产品设计中运用这一方法. 为什么大的物体更吸引眼球 ▲如上图所示,a球会比右边b球 ...
- SpringMVC 理论与有用技术（一） 简单、有用、易懂的几个实例
SpringMVC先来看一下百度百科中的定义; Spring MVC属于SpringFrameWork的兴许产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应 ...
- 专注UI——是alert（）打败了你！
在上家公司.常常在页面上写aler()提示代码.没有认为有什么,好寻常.认为提示就本来应该是这种,可是,当我到了这家公司.在測试的时候,由于測试人员看到了一个aler弹出框.结果我的页面被退回重写,后 ...
- UI Automation技术获取cmd或Powershell命令提示符窗口的实时内容
事先打开的Powershell或cmd窗口中的文本,用其他方式难以拿到.但是用UI Automation可以轻松获取.本工具在窗体上加入了一个Timer控件,每秒钟都查找桌面上是否有Powershel ...
随机推荐
- HTML简单介绍及举例
超文本标记语言(Hyper Text Markup Language,简称HTML)是为"网页创建和其他可在网页浏览器中看到的信息"设计的一种标记语言.HTML被用来结构化信息,也 ...
- 【Unity 3D】使用 2DToolkit 插件 制作2D精灵动画
话说博客传图也太麻烦了吧,一个一个文件一个一个传....为什么不能直接粘贴了,自动上传呢... 刚直接粘贴了,结果一张图没有,又重新截一次图,在传了一次...真是太**了 好了,吐槽完了,开始博客吧 ...
- 开发板和centos服务器tftp传文件
CentOS下使用TFTP向目标板传送文件http://www.linuxidc.com/Linux/2010-10/29218.htm 1.安装相关软件包 为了使主机支持TFTP,必须确保TFTP后 ...
- 设置HTTP代理
Maven通过<<UserHome>>/.m2/settings.xml(如果没有该文件,复制<<MavenHome>>/conf/settings.x ...
- Androidclient与服务端（jsp）之间json的传输与解析【附效果图附源代码】
近期有个项目须要用到json的传输,之前不是太了解,在网上找了些相关资料,写了一个小小的demo,能够实现基本功能:androidclient发送json到服务端,服务端使用jsp接收,解析后以jso ...
- semaphore实现浏览器的读写原理
在编程范式中的斯坦福大学的老师说了一个例子:好比世界上就只有一台互联网的服务器,当我们浏览网页的时候,就好比服务器进行了写操作,而浏览器则进行了读操作. 我如果用简单的伪代码c++写出来是这个样子的: ...
- 让office2003和office2010共存的方法【转】
前段时间由于工作需要安装office2010,每次打开word都会弹出安装配置界面,反之亦然.于是我在网上找了不少资料.也试了不少方法,终于试用了以下方法得以解决,以下来源于网络. 电脑上同时安装了O ...
- web攻击方式和防御方法
在http请求报文中载入攻击代码,就能发起对web应用的攻击.通过url查询字段或者表单.http首部.cookie等途径吧攻击代码传入,若这时web应用存在安全漏洞,那内部信息就会遭到窃取! 对we ...
- Oracle误删除表数据后的恢复具体解释
Oracle误删除表数据后的恢复具体解释 測试环境: SYSTEM:IBM AIX 5L Oracle Version:10gR2 1. undo_re ...
- POJ 1955 Rubik's Cube
暴力模拟就好了.... vim写代码真费事,手都写酸了... Rubik's Cube Time Limit: 1000MS Memory Limit: 30000K Total Submissi ...