jquery实现非动态搜索-js教程-PHP中文网

首页

web前端

js教程

jquery实现非动态搜索

php中世界最好的语言

Apr 19, 2018 pm 04:24 PM

jquery实现搜索

这次给大家带来jquery实现非动态搜索，jquery实现非动态搜索的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE html>
<html>
 <head>
 <metacharset="UTF-8">
 <title>jquery实现静态搜索功能</title>
 <!-- 最新版本的 Bootstrap 核心 css 文件 -->
 <linkrel="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 主题文件（一般不用引入） -->
 <linkrel="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&#39;s JavaScript plugins) -->
 <scriptsrc="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <scriptsrc="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>
 <pclass="container">
 <p> </p>
 <pclass="bs-example bs-example-tabs"data-example-id="togglable-tabs">
 <pclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1">
  <ulid="myTabs"class="nav navbar-nav nav-pills"role="tablist">
  <lirole="presentation"class="active">
  <ahref="#first"rel="external nofollow"role="tab"id="first-tab"data-toggle="tab"aria-controls="first"aria-expanded="true">克利夫兰 骑士</a>
  </li>
  <lirole="presentation"class="">
  <ahref="#second"rel="external nofollow"role="tab"id="second-tab"data-toggle="tab"aria-controls="second"aria-expanded="false">金州 勇士</a>
  </li>
  <lirole="presentation"class="">
  <ahref="#third"rel="external nofollow"role="tab"id="third-tab"data-toggle="tab"aria-controls="third"aria-expanded="false">波士顿 凯尔特人</a>
  </li>
  <lirole="presentation"class="">
  <ahref="#fouth"rel="external nofollow"role="tab"id="fouth-tab"data-toggle="tab"aria-controls="fouth"aria-expanded="false">休斯顿 火箭</a>
  </li>
  <lirole="presentation"class="hidden">
  <ahref="#search"rel="external nofollow"role="tab"id="search-tab"data-toggle="tab"aria-controls="search"aria-expanded="false">搜索结果tab隐藏</a>
  </li>
  </ul>
  <formclass="navbar-form navbar-right">
  <pclass="form-group">
  <pclass="input-group">
  <pclass="input-group-btn">
   <selectclass="form-control"id="searchSelect">
   <optionvalue="all"selected="selected">全部</option>
   <optionvalue="name">姓名</option>
   <optionvalue="position">位置</option>
   <optionvalue="about">介绍</option>
   </select>
  </p>
  <inputtype="text"id="searchText"class="form-control"placeholder="搜索内容">
  </p>
  </p>
  <buttontype="button"class="btn btn-default"id="searchBth">搜索</button>
  </form>
 </p>
 <pid="myTabContent"class="tab-content">
  <prole="tabpanel"class="tab-pane fade active in"id="first"aria-labelledby="first-tab">
  <tableclass="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>
  </p>
  <prole="tabpanel"class="tab-pane fade"id="second"aria-labelledby="second-tab">
  <tableclass="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>
  </p>
  <prole="tabpanel"class="tab-pane fade"id="third"aria-labelledby="third-tab">
  <tableclass="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>
  </p>
  <prole="tabpanel"class="tab-pane fade"id="fouth"aria-labelledby="fouth-tab">
  <tableclass="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>
  </p>
  <!-- 显示搜索结果框架 -->
  <prole="searchTable"class="tab-pane fade"id="search"aria-labelledby="search-tab">
  <h3>搜索结果</h3>
  <tableclass="table table-bordered table-striped">
  <thead>
  <tr>
   <th>号码</th>
   <th>姓名</th>
   <th>位置</th>
   <th>身高</th>
   <th>体重</th>
   <th>介绍</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
  </table>
  </p>
 </p>
 </p>
 <p><em>信息摘自互联网内容 若有冒犯请原谅 请留言反馈 立即删除</em></p>
 </p>
 <script>
 $(&#39;#myTabs a&#39;).click(function(e) {
 e.preventDefault()
 $(this).tab(&#39;show&#39;)
 })
 $(&#39;#searchText&#39;).change(function() {
 console.log("dd");
 var searchText = $(this).val();
 var searchSelect = $(&#39;#searchSelect&#39;).val();
 var $searchTr = "";
 if(searchText != "") {
  $(&#39;#search tbody&#39;).html("");
  //筛选搜索
  if(searchSelect == "name") {
  $searchTr = $(&#39;#myTabContent&#39;).find(&#39;td:nth-child(2):contains(&#39; + searchText + &#39;)&#39;).parent();
  } else if(searchSelect == "position") {
  $searchTr = $(&#39;#myTabContent&#39;).find(&#39;td:nth-child(3):contains(&#39; + searchText + &#39;)&#39;).parent();
  } else if(searchSelect == "about") {
  $searchTr = $(&#39;#myTabContent&#39;).find(&#39;td:nth-child(6):contains(&#39; + searchText + &#39;)&#39;).parent();
  } else {
  $searchTr = $(&#39;#myTabContent&#39;).find(&#39;td:contains(&#39; + searchText + &#39;)&#39;).parent();
  }
  $searchTr.each(function(i, e) {
  $(&#39;#search tbody&#39;).append($(e).clone(true));
  });
  //如果没有搜索结果 显示一个报错p
  if($searchTr.length <= 0) {
  $(&#39;#search tbody&#39;).html(&#39;<tdcolspan="7"><pclass="alert alert-warning"role="alert">没有内容</p></td>&#39;)
  }
  $(&#39;#search-tab&#39;).tab(&#39;show&#39;);
 }
 }).keyup(function() {
 $(this).change();
 })
 $(&#39;#searchBth&#39;).click(function() {
 $(&#39;#searchText&#39;).change();
 })
 </script>
 </body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery实现单行公告轮播

jquery插件扩展使用详解

base64实现加密解密功能

以上是jquery实现非动态搜索的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

幕后：什么语言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行，依赖JavaScript引擎解析和执行代码。1）解析阶段生成抽象语法树（AST）；2）编译阶段将AST转换为字节码或机器码；3）执行阶段执行编译后的代码。

Python和JavaScript的未来：趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括：1.Python将巩固在科学计算和AI领域的地位，2.JavaScript将推动Web技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗？检查证据Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。

See all articles