還在畢設(shè)中鲁冯，都快答辯了，畢設(shè)還沒做完色查，惆悵的不行薯演。。秧了。
值得慶祝的是寫到查詢了跨扮，再加油一下，馬上就好了验毡。衡创。。
說到查詢晶通，廣大程序猿們腦子里估計(jì)就冒出來了 “l(fā)ike balabala” 這樣的語句璃氢，不過在下畢竟是在半路上的java的車，實(shí)在不想動JDBC了狮辽，這不繼上回的前端偽分頁一也，這回又來了個前端偽查詢，實(shí)現(xiàn)起來也不困難：
<!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>項(xiàng)目中心 - 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">項(xiàng)目中心</a></li>
<li><a href="series-inf.html">系列信息</a></li>
<li class="bg"></li>
</ul>
</div>
<!--項(xiàng)目列表開始-->
<div id="ProList">
<div class="operateBar">
<div class="toolBar">
<div class="leftBar">
<button class="st-btn" onclick="window.location.href='add-pro.html'">添加項(xiàng)目</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>狀態(tài)</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="關(guān)鍵字檢索" />
<a class="search_btn"></a>
</div>
</div>
</div>
<div class="table-part">
<ul class="list-head list pro-list">
<li class="pro-name">項(xiàng)目名稱</li>
<li class="pro-state">狀態(tài)</li>
<li class="pro-chargeMan">負(fù)責(zé)人</li>
<li class="pro-start">開始時間</li>
<li class="pro-end">計(jì)劃完成時間</li>
<li class="pro-actual-end">實(shí)際完成時間</li>
<li class="pro-branch">所屬部門</li>
</ul>
<div class="myPro-list"></div>
<div class="page"></div>
</div>
</div>
<!--項(xiàng)目列表結(jié)束-->
</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">執(zhí)行</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("抱歉喉脖，查無結(jié)果Ｒ丁！动看！");
}
} else {
alert("抱歉尊剔，輸入內(nèi)容為空！Ａ饨浴须误！");
}
})
})
</script>
</body>
</html>
代碼很簡單，引上jq就能用了仇轻。
大概思路就是遍歷所有ul京痢，然后取其html內(nèi)容與輸入的關(guān)鍵字相匹配，再把匹配的ul打印出來篷店。
也正因?yàn)榇a簡單祭椰，所以可想而知作用也有限臭家，僅適用于不復(fù)雜的小數(shù)據(jù)量的表單（滿足畢設(shè)要求足夠了）。
特別要提到的一點(diǎn)是方淤，在JQ中獲取某個dom的內(nèi)容使用dom.html()只能獲取當(dāng)前節(jié)點(diǎn)下的html代碼钉赁，并不包含當(dāng)前節(jié)點(diǎn)本身的代碼，所以這里我們要用一個比較少用到的屬性“outerHtml”（注意這里只能用prop携茂，用attr并不行）你踩；
結(jié)果：
模糊查詢.gif
說明：
- 查詢結(jié)果為空時，直接彈框提示了讳苦，沒有改界面带膜；
- 輸入為空或空格，彈框提示鸳谜；
