专注UI——实用技术:模糊搜索
在现在的项目中,需要做模糊搜索,在以前技术的基础上很快得完成了第一版,大家先看看第一版的效果,我们一会做评论:
初级:
我们可能部分源码(附件中会有全部源码)
<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="" οnkeypress="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='"+listForQuerty.get(i).getEmployeeFullname()+"--("+listForQuerty.get(i).getEmployeeDeptname() +")' οnclick='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'; }
//后台代码:
//一个用户拼装为一个按钮,按钮按下给页面输入框同步输入(仿百度)
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() +")' οnclick='onClickUserName(this)' οnmοuseοver=Over(this); οnmοuseοut=Out(this); /><br/>" ;
专注UI——实用技术:模糊搜索相关推荐
- JqueryUI 引领Java开发新方式:专注UI,快速开发!(JqueryUI+jeecg结合, 升华的开发模式)
[一]jQuery 近期推出UI框架 : jQuery MiniUI - 快速开发WebUI. 介绍: 它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体 ...
- element UI 制作模糊搜索框
如图所示,当你输入某个关键字时,去掉用某个接口,然后通过关键字获取数据. View Code <el-autocompleteclass="inline-input"v-mo ...
- UI素材干货模板|插画动效工作区域多个动画对象和6个动画场景
一个了不起的动画库,包含超过75个动画对象,可创建您自己的独特工作区动画. 这个清晰的产品包括6个预制的动画场景,每个场景都包含4种动画类型:完整,打开,循环和 结束. 与After Effects, ...
- UI加载动效模板|优秀作品给UI设计师做个示范
加载动效是UI动效设计中最流行的类型之一.这也难怪,因为等待是我们每天线上和线下都可能遇到的烦人的事情.任何让等待变得没那么无聊的因素都是宝贵的--因为在与应用程序和网站进行交互时,加载总是首当其冲的 ...
- 【网页素材】数据图表界面设计UI设计PSD模板
控制面板也称之为仪表盘,它本身就是基于汽车和飞机仪表盘这一隐喻,是一个综合性的中控台,让用户以最便捷的方式来掌控信息并进行操纵.日常工作中一些企业总期望能够设计出足够一目了然的仪表盘,能够一眼看清信息 ...
- UI设计干货模板|引导网格系统
网格确保了设计结构的组织分明.结构明晰.我们可以通过网格系统更好的打造设计的信息层级,让设计阅读起来更具有韵律感.就跟编码一样,编码需要有机的组织结构,而网页设计的网格系统也是同样的作用. 引导4网格 ...
- UI素材模板|数据可视化APP界面
设计app时,仪表板"."大数据"."数据可视化"."数据分析"--越来越多人和企业,开始运用他们的数据来做一些有趣的事情.在我的 ...
- UI干货素材|app切换开关模块
换开关最适合用于更改系统功能和首选项的状态. 它可以替换两个单选按钮或一个复选框,允许用户在两个相反的状态之间进行选择. 有时候,决定使用哪个组件(单选按钮.复选框或切换开关)可能很困难. 当您想知道 ...
- UI素材模板|app ui界面的导航设计都有哪些?
导航的使命就在于自身的"名称"上面,它叫什么名字就是在告诉用户"沿着这条路能通往哪里",所以导航的展示形式虽然多种多样,却大多逃不出文字的辅佐,这是因为它的本质 ...
最新文章
- nvidia-smi 实时刷新 实时显示显存使用情况
- [转]远程唤醒技术在运维中的应用
- 中英文切换_王者荣耀:模拟战奖励一览,新增中英文切换,李白第二套星元来袭...
- NHibernate for .NET 1.2
- 【渝粤教育】国家开放大学2018年春季 0233-21T学前儿童语言教育 参考试题
- UAC执行批处理,进行提示
- Basic Oracle Net Services Client-Side Configuration
- IPv4和IPv6有什么不同
- VScode-Go can't load package: package .: no buildable Go source files in
- selenium webdriver如何操作select下拉框
- pandas.Series
- Adobe Flash Builder 四 序列号
- 【1800题】一、函数、极限、连续
- 程序员须学计算机语言,IT程序员入门必须要学会的是什么?
- c++实现植物大战僵尸修改器
- SpringBoot MultipartResolver的坑
- 用R来求解一元二次方程
- 启用计算机的无线同屏,Windows10如何使用无线同屏功能?
- Teranex Express格式转换器
- 套接字相关数据据结构及分层模型