溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“jquery如何實現靜態搜索功能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jquery如何實現靜態搜索功能”這篇文章吧。
效果圖：
代碼如下：
<!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/K68vbdEjh5u" 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"> <h4>搜索結果</h4> <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>
以上是“jquery如何實現靜態搜索功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
