jquery實(shí)現(xiàn)靜態(tài)搜索功能(可輸入搜索文字)
更新時(shí)間：2017年03月28日 14:17:45 作者：jiangbinwangyi
本文主要介紹了jquery實(shí)現(xiàn)靜態(tài)搜索功能的示例代碼，可通過(guò)輸入搜索文字進(jìn)行篩選信息。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery實(shí)現(xiàn)靜態(tài)搜索功能</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" rel="external nofollow" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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;
}
</style>
</head>
<body>
<div class="container">
<p> </p>
<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="myTabs" class="nav navbar-nav nav-pills" role="tablist">
<li role="presentation" class="active">
<a href="#first" rel="external nofollow" role="tab" id="first-tab" data-toggle="tab" aria-controls="first" aria-expanded="true">克利夫蘭 騎士</a>
</li>
<li role="presentation" class="">
<a href="#second" rel="external nofollow" role="tab" id="second-tab" data-toggle="tab" aria-controls="second" aria-expanded="false">金州 勇士</a>
</li>
<li role="presentation" class="">
<a href="#third" rel="external nofollow" role="tab" id="third-tab" data-toggle="tab" aria-controls="third" aria-expanded="false">波士頓 凱爾特人</a>
</li>
<li role="presentation" class="">
<a href="#fouth" rel="external nofollow" role="tab" id="fouth-tab" data-toggle="tab" aria-controls="fouth" aria-expanded="false">休斯頓 火箭</a>
</li>
<li role="presentation" class="hidden">
<a href="#search" rel="external nofollow" role="tab" id="search-tab" data-toggle="tab" aria-controls="search" aria-expanded="false">搜索結(jié)果tab隱藏</a>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<select class="form-control" id="searchSelect">
<option value="all" selected="selected">全部</option>
<option value="name">姓名</option>
<option value="position">位置</option>
<option value="about">介紹</option>
</select>
</div>
<input type="text" id="searchText" class="form-control" placeholder="搜索內(nèi)容">
</div>
</div>
<button type="button" class="btn btn-default" id="searchBth">搜索</button>
</form>
</div>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="first" aria-labelledby="first-tab">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>號(hào)碼</th>
<th>姓名</th>
<th>位置</th>
<th>身高</th>
<th>體重</th>
<th>介紹</th>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
<td>勒布朗-詹姆斯</td>
<td>小前鋒</td>
<td>203CM</td>
<td>113KG</td>
<td>四屆NBA最有價(jià)值球員獎(jiǎng)</td>
</tr>
<tr>
<td>2</td>
<td>凱爾-歐文</td>
<td>控球后衛(wèi)</td>
<td>191CM</td>
<td>88KG</td>
<td>15-16賽季NBA總冠軍</td>
</tr>
<tr>
<td>0</td>
<td>凱文-樂(lè)福</td>
<td>大前鋒/中鋒</td>
<td>208CM</td>
<td>110KG</td>
<td>15-16賽季獲得NBA總冠軍</td>
</tr>
<tr>
<td>13</td>
<td>特里斯坦-湯普森</td>
<td>大前鋒</td>
<td>206CM</td>
<td>103KG</td>
<td>擅長(zhǎng)拼搶進(jìn)攻籃板球</td>
</tr>
<tr>
<td>5</td>
<td>J.R.史密斯</td>
<td>得分后衛(wèi)</td>
<td>198CM</td>
<td>102KG</td>
<td>15-16賽季NBA總冠軍</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="second" aria-labelledby="second-tab">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>號(hào)碼</th>
<th>姓名</th>
<th>位置</th>
<th>身高</th>
<th>體重</th>
<th>介紹</th>
</tr>
</thead>
<tbody>
<tr>
<td>30</td>
<td>斯蒂芬-庫(kù)里</td>
<td>控球后衛(wèi)</td>
<td>191CM</td>
<td>83.9KG</td>
<td>兩屆NBA最有價(jià)值球員獎(jiǎng) 三分精準(zhǔn)</td>
</tr>
<tr>
<td>11</td>
<td>克萊-湯普森</td>
<td>得分后衛(wèi)</td>
<td>201CM</td>
<td>93KG</td>
<td>14-15賽季NBA總冠軍</td>
</tr>
<tr>
<td>35</td>
<td>凱文-杜蘭特</td>
<td>小前鋒/大前鋒</td>
<td>211CM</td>
<td>106.6KG</td>
<td>得分手段多樣投籃精準(zhǔn)</td>
</tr>
<tr>
<td>23</td>
<td>德雷蒙德-格林</td>
<td>前鋒</td>
<td>201CM</td>
<td>104KG</td>
<td>頂級(jí)鋒線(xiàn)防守者</td>
</tr>
<tr>
<td>9</td>
<td>安德魯-伊格達(dá)拉</td>
<td>得分后衛(wèi)</td>
<td>198CM</td>
<td>94KG</td>
<td>迷你版勒布朗身體素質(zhì)極佳</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="third" aria-labelledby="third-tab">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>號(hào)碼</th>
<th>姓名</th>
<th>位置</th>
<th>身高</th>
<th>體重</th>
<th>介紹</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>以賽亞-托馬斯</td>
<td>控球后衛(wèi)</td>
<td>175CM</td>
<td>84KG</td>
<td>球風(fēng)強(qiáng)硬 能夠突破 具備三分射程</td>
</tr>
<tr>
<td>0</td>
<td>埃弗里-布拉德利</td>
<td>控球后衛(wèi)</td>
<td>188CM</td>
<td>82KG</td>
<td>15-16賽季最佳防守陣容第一陣容</td>
</tr>
<tr>
<td>42</td>
<td>艾爾-霍福德</td>
<td>中鋒</td>
<td>208CM</td>
<td>111KG</td>
<td>球風(fēng)全面的內(nèi)線(xiàn) 中距離精準(zhǔn)</td>
</tr>
<tr>
<td>9</td>
<td>賈伊-克勞德</td>
<td>大前鋒</td>
<td>198CM</td>
<td>107KG</td>
<td>能量四射的雙能鋒</td>
</tr>
<tr>
<td>36</td>
<td>馬庫(kù)斯-斯瑪特</td>
<td>控球后衛(wèi)</td>
<td>193CM</td>
<td>100KG</td>
<td>敢于突破不懼身體對(duì)抗球風(fēng)無(wú)私</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="fouth" aria-labelledby="fouth-tab">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>號(hào)碼</th>
<th>姓名</th>
<th>位置</th>
<th>身高</th>
<th>體重</th>
<th>介紹</th>
</tr>
</thead>
<tbody>
<tr>
<td>13</td>
<td>詹姆斯-哈登</td>
<td>后衛(wèi)</td>
<td>196CM</td>
<td>99.8KG</td>
<td>兩次入選NBA最佳陣容第一陣容</td>
</tr>
<tr>
<td>1</td>
<td>特雷沃-阿里扎</td>
<td>小前鋒</td>
<td>203CM</td>
<td>95.3KG</td>
<td>08-09賽季NBA總冠軍</td>
</tr>
<tr>
<td>2</td>
<td>帕特里克-貝弗利</td>
<td>控球后衛(wèi)</td>
<td>185CM</td>
<td>84KG</td>
<td>2015年全明星技巧挑戰(zhàn)賽冠軍</td>
</tr>
<tr>
<td>10</td>
<td>埃里克-戈登</td>
<td>得分后衛(wèi)</td>
<td>191CM</td>
<td>100.7KG</td>
<td>屬于攻擊型得分后衛(wèi)</td>
</tr>
<tr>
<td>3</td>
<td>萊恩-安德森</td>
<td>大前鋒</td>
<td>208CM</td>
<td>109KG</td>
<td>投籃型內(nèi)線(xiàn)出手快</td>
</tr>
</tbody>
</table>
</div>
<!-- 顯示搜索結(jié)果框架 -->
<div role="searchTable" class="tab-pane fade" id="search" aria-labelledby="search-tab">
<h3>搜索結(jié)果</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>號(hào)碼</th>
<th>姓名</th>
<th>位置</th>
<th>身高</th>
<th>體重</th>
<th>介紹</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<p><em>信息摘自互聯(lián)網(wǎng)內(nèi)容 若有冒犯請(qǐng)?jiān)?請(qǐng)留言反饋 立即刪除</em></p>
</div>
<script>
$('#myTabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
$('#searchText').change(function() {
console.log("dd");
var searchText = $(this).val();
var searchSelect = $('#searchSelect').val();
var $searchTr = "";
if(searchText != "") {
$('#search tbody').html("");
//篩選搜索
if(searchSelect == "name") {
$searchTr = $('#myTabContent').find('td:nth-child(2):contains(' + searchText + ')').parent();
} else if(searchSelect == "position") {
$searchTr = $('#myTabContent').find('td:nth-child(3):contains(' + searchText + ')').parent();
} else if(searchSelect == "about") {
$searchTr = $('#myTabContent').find('td:nth-child(6):contains(' + searchText + ')').parent();
} else {
$searchTr = $('#myTabContent').find('td:contains(' + searchText + ')').parent();
}
$searchTr.each(function(i, e) {
$('#search tbody').append($(e).clone(true));
});
//如果沒(méi)有搜索結(jié)果 顯示一個(gè)報(bào)錯(cuò)div
if($searchTr.length <= 0) {
$('#search tbody').html('<td colspan = "7"><div class="alert alert-warning" role="alert">沒(méi)有內(nèi)容</div></td>')
}
$('#search-tab').tab('show');
}
}).keyup(function() {
$(this).change();
})
$('#searchBth').click(function() {
$('#searchText').change();
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)動(dòng)態(tài)文字搜索功能
- JS實(shí)現(xiàn)搜索框文字可刪除功能
- javascript搜索框點(diǎn)擊文字消失失焦時(shí)文本出現(xiàn)
- 利用jQuery實(shí)現(xiàn)可輸入搜索文字的下拉框
- JavaScript前端頁(yè)面搜索功能案例【基于jQuery】
- jQuery Jsonp跨域模擬搜索引擎
- jquery中用jsonp實(shí)現(xiàn)搜索框功能
- JQuery+JS實(shí)現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果
- 基于jquery的頁(yè)面劃詞搜索JS
- jquery+json實(shí)現(xiàn)的搜索加分頁(yè)效果
- jQuery單頁(yè)面文字搜索插件jquery.fullsearch.js的使用方法
相關(guān)文章
這篇文章主要介紹了jQuery實(shí)現(xiàn)字符串全部替換的方法,結(jié)合實(shí)例形式對(duì)比分析了使用Replace進(jìn)行替換的方法及使用正則進(jìn)行全部替換的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
jquery專(zhuān)業(yè)的導(dǎo)航菜單特效代碼分享
這篇文章主要介紹了jquery專(zhuān)業(yè)的下拉菜單特效，一個(gè)精致的導(dǎo)航菜單會(huì)吸引用戶(hù)的注意力，讓用戶(hù)產(chǎn)生瀏覽網(wǎng)站的興趣至關(guān)重要，現(xiàn)在小編推薦給大家一款特別棒的導(dǎo)航菜單，感興趣的小伙伴可以參考下。2015-08-08
jQuery簡(jiǎn)單倒計(jì)時(shí)效果完整示例
這篇文章主要介紹了jQuery簡(jiǎn)單倒計(jì)時(shí)效果,結(jié)合完整實(shí)例形式分析了jQuery針對(duì)日期與時(shí)間的計(jì)算與頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
ASP.NET jQuery 實(shí)例2 (表單中使用回車(chē)在TextBox之間向下移動(dòng))
每次當(dāng)用戶(hù)在一個(gè)文本框輸入完數(shù)據(jù)后，更希望在敲入回車(chē)鍵后，焦點(diǎn)會(huì)自動(dòng)移動(dòng)到下一個(gè)文本框2012-01-01
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript和JQuery制作簡(jiǎn)易留言板功能，文中的示例代碼講解詳細(xì)，有需要的小伙伴可以參考一下2016-05-05
jQuery使用drag效果實(shí)現(xiàn)自由拖拽div
本文給大家分享一款jquery實(shí)現(xiàn)的完美拖拽(拖動(dòng)div層效果)，如果你正在找這類(lèi)效果不妨進(jìn)入?yún)⒖家幌隆?/div> 2015-06-06
jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法
這篇文章主要介紹了jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法,涉及jQuery針對(duì)頁(yè)面元素的操作技巧,需要的朋友可以參考下2015-06-06
JavaScript揭秘：實(shí)現(xiàn)自動(dòng)化連連看游戲
這篇文章主要介紹了JavaScript揭秘：實(shí)現(xiàn)自動(dòng)化連連看游戲的相關(guān)資料,需要的朋友可以參考下2023-11-11
jQuery中DOM樹(shù)操作之復(fù)制元素的方法
這篇文章主要介紹了jQuery中DOM樹(shù)操作之復(fù)制元素的方法,實(shí)例分析了DOM樹(shù)復(fù)制元素的使用技巧,需要的朋友可以參考下2015-01-01
在一些圖片比較多的網(wǎng)站上會(huì)出現(xiàn)訪(fǎng)問(wèn)時(shí)圖片不存在的情況：默認(rèn)顯示出來(lái)的樣子很不雅觀(guān),可以解決圖片不存在時(shí)，使用其他的圖片替換嗎，答案是可以的；感興趣的朋友可以了解下，或許本文可以幫助到你2013-02-02最新評(píng)論