jquery实现静态搜索功能(可输入搜索文字)
程序员文章站
2023-11-16 15:58:04
效果图：
代码如下：
效果图：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery实现静态搜索功能</title>
<!-- 最新版本的 bootstrap 核心 css 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous">
<!-- 可选的 bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 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">搜索结果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="搜索内容">
</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>号码</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最有价值球员奖</td>
</tr>
<tr>
<td>2</td>
<td>凯尔-欧文</td>
<td>控球后卫</td>
<td>191cm</td>
<td>88kg</td>
<td>15-16赛季nba总冠军</td>
</tr>
<tr>
<td>0</td>
<td>凯文-乐福</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>擅长拼抢进攻篮板球</td>
</tr>
<tr>
<td>5</td>
<td>j.r.史密斯</td>
<td>得分后卫</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>号码</th>
<th>姓名</th>
<th>位置</th>
<th>身高</th>
<th>体重</th>
<th>介绍</th>
</tr>
</thead>
<tbody>
<tr>
<td>30</td>
<td>斯蒂芬-库里</td>
<td>控球后卫</td>
<td>191cm</td>
<td>83.9kg</td>
<td>两届nba最有价值球员奖 三分精准</td>
</tr>
<tr>
<td>11</td>
<td>克莱-汤普森</td>
<td>得分后卫</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>得分手段多样投篮精准</td>
</tr>
<tr>
<td>23</td>
<td>德雷蒙德-格林</td>
<td>前锋</td>
<td>201cm</td>
<td>104kg</td>
<td>*锋线防守者</td>
</tr>
<tr>
<td>9</td>
<td>安德鲁-伊格达拉</td>
<td>得分后卫</td>
<td>198cm</td>
<td>94kg</td>
<td>迷你版勒布朗身体素质极佳</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>号码</th>
<th>姓名</th>
<th>位置</th>
<th>身高</th>
<th>体重</th>
<th>介绍</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>以赛亚-托马斯</td>
<td>控球后卫</td>
<td>175cm</td>
<td>84kg</td>
<td>球风强硬 能够突破 具备三分射程</td>
</tr>
<tr>
<td>0</td>
<td>埃弗里-布拉德利</td>
<td>控球后卫</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>球风全面的内线 中距离精准</td>
</tr>
<tr>
<td>9</td>
<td>贾伊-克劳德</td>
<td>大前锋</td>
<td>198cm</td>
<td>107kg</td>
<td>能量四射的双能锋</td>
</tr>
<tr>
<td>36</td>
<td>马库斯-斯玛特</td>
<td>控球后卫</td>
<td>193cm</td>
<td>100kg</td>
<td>敢于突破不惧身体对抗球风无私</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>号码</th>
<th>姓名</th>
<th>位置</th>
<th>身高</th>
<th>体重</th>
<th>介绍</th>
</tr>
</thead>
<tbody>
<tr>
<td>13</td>
<td>詹姆斯-哈登</td>
<td>后卫</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>控球后卫</td>
<td>185cm</td>
<td>84kg</td>
<td>2015年全明星技巧挑战赛冠军</td>
</tr>
<tr>
<td>10</td>
<td>埃里克-戈登</td>
<td>得分后卫</td>
<td>191cm</td>
<td>100.7kg</td>
<td>属于攻击型得分后卫</td>
</tr>
<tr>
<td>3</td>
<td>莱恩-安德森</td>
<td>大前锋</td>
<td>208cm</td>
<td>109kg</td>
<td>投篮型内线出手快</td>
</tr>
</tbody>
</table>
</div>
<!-- 显示搜索结果框架 -->
<div role="searchtable" class="tab-pane fade" id="search" aria-labelledby="search-tab">
<h3>搜索结果</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>号码</th>
<th>姓名</th>
<th>位置</th>
<th>身高</th>
<th>体重</th>
<th>介绍</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<p><em>信息摘自互联网内容 若有冒犯请原谅 请留言反馈 立即删除</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));
});
//如果没有搜索结果 显示一个报错div
if($searchtr.length <= 0) {
$('#search tbody').html('<td colspan = "7"><div class="alert alert-warning" role="alert">没有内容</div></td>')
}
$('#search-tab').tab('show');
}
}).keyup(function() {
$(this).change();
})
$('#searchbth').click(function() {
$('#searchtext').change();
})
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！