这次给大家带来jquery实现非动态搜索，jquery实现非动态搜索的注意事项有哪些，下面就是实战案例，一起来看一下。
nbsp;html>jquery实现静态搜索功能 .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; }克利夫兰 骑士 金州 勇士 波士顿 凯尔特人 休斯顿 火箭 搜索结果tab隐藏 全部 姓名 位置 介绍 搜索 号码 姓名 位置 身高 体重 介绍 23 勒布朗-詹姆斯 小前锋 203CM 113KG 四届NBA最有价值球员奖 2 凯尔-欧文 控球后卫 191CM 88KG 15-16赛季NBA总冠军 0 凯文-乐福 大前锋/中锋 208CM 110KG 15-16赛季获得NBA总冠军 13 特里斯坦-汤普森 大前锋 206CM 103KG 擅长拼抢进攻篮板球 5 J.R.史密斯 得分后卫 198CM 102KG 15-16赛季NBA总冠军 号码 姓名 位置 身高 体重 介绍 30 斯蒂芬-库里 控球后卫 191CM 83.9KG 两届NBA最有价值球员奖 三分精准 11 克莱-汤普森 得分后卫 201CM 93KG 14-15赛季NBA总冠军 35 凯文-杜兰特 小前锋/大前锋 211CM 106.6KG 得分手段多样投篮精准 23 德雷蒙德-格林 前锋 201CM 104KG 顶级锋线防守者 9 安德鲁-伊格达拉 得分后卫 198CM 94KG 迷你版勒布朗身体素质极佳 号码 姓名 位置 身高 体重 介绍 4 以赛亚-托马斯 控球后卫 175CM 84KG 球风强硬 能够突破 具备三分射程 0 埃弗里-布拉德利 控球后卫 188CM 82KG 15-16赛季最佳防守阵容第一阵容 42 艾尔-霍福德 中锋 208CM 111KG 球风全面的内线 中距离精准 9 贾伊-克劳德 大前锋 198CM 107KG 能量四射的双能锋 36 马库斯-斯玛特 控球后卫 193CM 100KG 敢于突破不惧身体对抗球风无私 号码 姓名 位置 身高 体重 介绍 13 詹姆斯-哈登 后卫 196CM 99.8KG 两次入选NBA最佳阵容第一阵容 1 特雷沃-阿里扎 小前锋 203CM 95.3KG 08-09赛季NBA总冠军 2 帕特里克-贝弗利 控球后卫 185CM 84KG 2015年全明星技巧挑战赛冠军 10 埃里克-戈登 得分后卫 191CM 100.7KG 属于攻击型得分后卫 3 莱恩-安德森 大前锋 208CM 109KG 投篮型内线出手快
搜索结果
号码 姓名 位置 身高 体重 介绍信息摘自互联网内容 若有冒犯请原谅 请留言反馈 立即删除
$('#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)); }); //如果没有搜索结果 显示一个报错p if($searchTr.length <= 0) { $('#search tbody').html('没有内容') } $('#search-tab').tab('show'); } }).keyup(function() { $(this).change(); }) $('#searchBth').click(function() { $('#searchText').change(); })
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
jQuery实现单行公告轮播
jquery插件扩展使用详解
base64实现加密解密功能
以上就是jquery实现非动态搜索的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2770378.html
