首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

jquery实现静态搜索功能(可输入搜索文字)

所属分类： 网络编程 / JavaScript 阅读数： 1712
收藏 0 赞 0 分享

效果图：

代码如下：

<!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>&nbsp;</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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return，需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。下面通过实例详解，需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数，用于操作当前数组自身，用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法，需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式：由ECMA-262规范定义的JavaScript标准，对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时，alert弹出的提示框中文显示为乱码，怎么解决此问题呢？下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法，一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现（同步与异步）

这篇文章主要介绍了JS分页的实现（同步与异步）,需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能，下面小编把实例demo分享到脚本之家平台，需要的朋友参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22