jquery实现静态搜索功能(可输入搜索文字)
更新时间:2017年03月28日 14:17:45 作者:jiangbinwangyi
本文主要介绍了jquery实现静态搜索功能的示例代码,可通过输入搜索文字进行筛选信息。具有很好的参考价值,下面跟着小编一起来看下吧
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
效果图:
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 | <!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 > |
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
jQuery Ajax使用FormData对象上传文件的方法
这篇文章主要介绍了jQuery Ajax使用FormData对象上传文件的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-09-09浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
这几天,遇到了json格式在JS和Jquey的环境中,需要相互转换,在网上查了一下,大多为缺胳膊少腿,也许咱是菜鸟吧,终于测试成功后,还是给初学者们一个实例吧2013-07-07
最新评论