填坑之路：前端伪查询
2017-05-19 本文已影响39人
哦啦吧啦丶
还在毕设中，都快答辩了，毕设还没做完，惆怅的不行。。。
值得庆祝的是写到查询了，再加油一下，马上就好了。。。
说到查询，广大程序猿们脑子里估计就冒出来了 “like balabala” 这样的语句，不过在下毕竟是在半路上的java的车，实在不想动JDBC了，这不继上回的前端伪分页，这回又来了个前端伪查询，实现起来也不困难：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
<script type="text/javascript" src="js/Centerm.js" ></script>
<link rel="stylesheet" href="css/Centerm.css" />
<title>项目中心 - Centerm</title>
<style>
#page-nav ul .bg{
left: 0px;
}
</style>
</head>
<body>
<div id="main-page">
<div id="page-nav">
<ul>
<li><a href="pro-list.html" class="active">项目中心</a></li>
<li><a href="series-inf.html">系列信息</a></li>
<li class="bg"></li>
</ul>
</div>
<!--项目列表开始-->
<div id="ProList">
<div class="operateBar">
<div class="toolBar">
<div class="leftBar">
<button class="st-btn" onclick="window.location.href='add-pro.html'">添加项目</button>
</div>
<div class="middleBar">
<div class="filterBar">
<div class="filter_tag">
<span>条件筛选：</span>
</div>
<ul>
<li class="pro_first_filter choose-filter">
<a class="fileType_filter" href="javascript:;" title="过滤">
<span>筛选条件</span>
<i></i>
</a>
<i class="list_arrow"></i>
<div class="dropdown_list">
<ul>
<li class="active_li">
<span>筛选条件</span>
</li>
<li>
<span>状态</span>
</li>
<li>
<span>类型</span>
</li>
<li>
<span>范围</span>
</li>
<li>
<span>难易程度</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="rightBar">
<input type="text" class="keyword" name="keyword" placeholder="关键字检索" />
<a class="search_btn"></a>
</div>
</div>
</div>
<div class="table-part">
<ul class="list-head list pro-list">
<li class="pro-name">项目名称</li>
<li class="pro-state">状态</li>
<li class="pro-chargeMan">负责人</li>
<li class="pro-start">开始时间</li>
<li class="pro-end">计划完成时间</li>
<li class="pro-actual-end">实际完成时间</li>
<li class="pro-branch">所属部门</li>
</ul>
<div class="myPro-list"></div>
<div class="page"></div>
</div>
</div>
<!--项目列表结束-->
</div>
<script type="text/javascript">
$(function(){
var html = '';
for(var i =0;i<10;i++){
html += '<ul class="list-content list pro-list" >'
+'<li class="pro-name"><a href="pro-detail.html" class="name-skipable">'+i+'</a></li>'
+'<li class="pro-state">执行</li>'
+'<li class="pro-chargeMan">啦啦啦</li>'
+'<li class="pro-start">2016-07-18</li>'
+'<li class="pro-end">2016-11-18</li>'
+'<li class="pro-actual-end">2016-10-22</li>'
+'<li class="pro-branch">智能终端</li>'
+'</ul>'
}
$(".myPro-list").empty().append(html);
$('.search_btn').click(function(){
if($.trim($(".keyword").val()) !== ''){
var ulList = $(".myPro-list").find("ul");
var keyword = $(".keyword").val();
var newList = '';
for(var i = 0;i<ulList.length;i++){
var content = $(ulList[i]).prop("outerHTML");
if(content.indexOf(keyword) != -1){
newList += content;
}
}
if(newList != ''){
$(".myPro-list").empty().append(newList);
} else {
alert("抱歉，查无结果！！！");
}
} else {
alert("抱歉，输入内容为空！！！");
}
})
})
</script>
</body>
</html>
代码很简单，引上jq就能用了。
大概思路就是遍历所有ul，然后取其html内容与输入的关键字相匹配，再把匹配的ul打印出来。
也正因为代码简单，所以可想而知作用也有限，仅适用于不复杂的小数据量的表单（满足毕设要求足够了）。
特别要提到的一点是，在JQ中获取某个dom的内容使用dom.html()只能获取当前节点下的html代码，并不包含当前节点本身的代码，所以这里我们要用一个比较少用到的属性“outerHtml”（注意这里只能用prop，用attr并不行）；
结果：
模糊查询.gif
说明：
- 查询结果为空时，直接弹框提示了，没有改界面；
- 输入为空或空格，弹框提示；
