jquery实现静态搜索功能
在做网站时，有时会有很多的列表内容，长长的一竖排，用户体验不好，所以想仿照微软件的MSDN，在列表最上面提供一个搜索框，这样用户只需要输入相关的关键字符就可以快速检索，显示用户想要的信息。
本文采用Jquery的find和Contains方法来实现不区分大小写的方法搜索，具体步骤如下.
1.建立用户搜索的输入框，这里可以用input type=text来实现，可按需求是否增加一个按钮确定，也可以用Jquery检测text的内容变化来响应搜索。
2.建立一个隐藏的搜索结果标记，用来当用户搜索时显示搜索的结果。
3.所有列表内容。
本文只实现最其本的效，样式用户可按自已的需求进行修改。
效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery实现静态搜索功能</title>
<script src="js/jquery.min.js"></script>
<style>
.navbar-collapse {
padding: 0;
}
.alert {
margin: 20px;
}
.input-group select.form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin-right: -1px;
}
.tab-content{
padding-top: 20px;
}
#SearchResult
{
background:#eee;
border:1px solid #333;
display:none;
}
#SearchList > li
{
list-style:none;
}
#SearchList > li > a
{
color:#333;
text-decoration:none;
}
#SearchResult > li
{
list-style:none;
}
#SearchResult > li > a
{
color:#333;
text-decoration:none;
}
</style>
</head>
<body>
<div class="container">
<form class="navbar-form navbar-right">
<input type="text" id="searchText" class="form-control" placeholder="搜索内容">
<button type="button" class="btn btn-default" id="searchBth">搜索</button>
</form>
<ul id="SearchResult">
</ul>
<ul id="SearchList">
<li><a href="GetCurrentProcessToken ">GetCurrentProcessToken </a></li>
<li><a href="GetCurrentThread ">GetCurrentThread </a></li>
<li><a href="GetCurrentThreadEffectiveToken ">GetCurrentThreadEffectiveToken </a></li>
<li><a href="GetCurrentThreadId ">GetCurrentThreadId </a></li>
<li><a href="GetCurrentThreadStackLimits ">GetCurrentThreadStackLimits </a></li>
<li><a href="GetCurrentThreadToken ">GetCurrentThreadToken </a></li>
<li><a href="GetExitCodeProcess ">GetExitCodeProcess </a></li>
<li><a href="GetExitCodeThread ">GetExitCodeThread </a></li>
<li><a href="GetPriorityClass ">GetPriorityClass </a></li>
<li><a href="GetProcessHandleCount ">GetProcessHandleCount </a></li>
<li><a href="GetProcessId ">GetProcessId </a></li>
<li><a href="GetProcessIdOfThread ">GetProcessIdOfThread </a></li>
<li><a href="GetProcessInformation ">GetProcessInformation </a></li>
<li><a href="GetProcessMitigationPolicy ">GetProcessMitigationPolicy </a></li>
<li><a href="GetProcessPriorityBoost ">GetProcessPriorityBoost </a></li>
<li><a href="GetProcessShutdownParameters ">GetProcessShutdownParameters </a></li>
<li><a href="GetProcessTimes ">GetProcessTimes </a></li>
<li><a href="GetProcessVersion ">GetProcessVersion </a></li>
<li><a href="GetStartupInfoW ">GetStartupInfoW </a></li>
<li><a href="GetSystemTimes ">GetSystemTimes </a></li>
<li><a href="GetThreadContext ">GetThreadContext </a></li>
<li><a href="GetThreadDescription ">GetThreadDescription </a></li>
<li><a href="GetThreadId ">GetThreadId </a></li>
<li><a href="GetThreadIdealProcessorEx ">GetThreadIdealProcessorEx </a></li>
<li><a href="GetThreadInformation ">GetThreadInformation </a></li>
<li><a href="GetThreadIOPendingFlag ">GetThreadIOPendingFlag </a></li>
<li><a href="GetThreadPriority ">GetThreadPriority </a></li>
<li><a href="GetThreadPriorityBoost ">GetThreadPriorityBoost </a></li>
<li><a href="GetThreadTimes ">GetThreadTimes </a></li>
<li><a href="InitializeProcThreadAttributeList">InitializeProcThreadAttributeList</a></li>
<li><a href="IsProcessCritical ">IsProcessCritical </a></li>
<li><a href="IsProcessorFeaturePresent ">IsProcessorFeaturePresent </a></li>
<li><a href="OpenProcess ">OpenProcess </a></li>
<li><a href="OpenProcessToken ">OpenProcessToken </a></li>
<li><a href="OpenThread ">OpenThread </a></li>
<li><a href="OpenThreadToken ">OpenThreadToken </a></li>
<li><a href="QueryProcessAffinityUpdateMode ">QueryProcessAffinityUpdateMode </a></li>
<li><a href="QueryProtectedPolicy ">QueryProtectedPolicy </a></li>
<li><a href="QueueUserAPC ">QueueUserAPC </a></li>
<li><a href="ResumeThread ">ResumeThread </a></li>
<li><a href="SetPriorityClass ">SetPriorityClass </a></li>
<li><a href="SetProcessAffinityUpdateMode ">SetProcessAffinityUpdateMode </a></li>
<li><a href="SetProcessInformation ">SetProcessInformation </a></li>
<li><a href="SetProcessMitigationPolicy ">SetProcessMitigationPolicy </a></li>
<li><a href="SetProcessPriorityBoost ">SetProcessPriorityBoost </a></li>
<li><a href="SetProcessShutdownParameters ">SetProcessShutdownParameters </a></li>
<li><a href="SetProtectedPolicy ">SetProtectedPolicy </a></li>
</ul>
</div>
<script>
$('#myTabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
//start 实现不区分大小写功能，重写操作符
jQuery.expr[':'].Contains = function(a, i, m){
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
// OVERWRITES old selecor
jQuery.expr[':'].contains = function(a, i, m){
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
// end
$('#searchText').change(function() {
var searchText = $(this).val();
console.log("searchText:"+searchText);
var $searchTr = "";
if(searchText != "") {
$('#SearchResult').show();
$('#SearchResult').html("");
$('#SearchList').hide();
$searchTr = $('#SearchList li').find('a:contains(' + searchText + ')').parent(); //get li
console.log($searchTr.length);
$searchTr.each(function(i, e) {
$('#SearchResult').append($(e).clone(true));
});
//如果没有搜索结果 显示一个报错div
if($searchTr.length <= 0) {
$('#SearchResult').html('<div class="alert alert-warning" role="alert">没有内容</div>')
}
}else
{
$('#SearchResult').html("");
$('#SearchResult').hide();
$('#SearchList').show();
}
}).keyup(function() {
$(this).change();
})
$('#searchBth').click(function() {
$('#searchText').change();
})
</script>
</body>
</html>
