基于layui实现高级搜索（筛选）功能

基于layui写的一个高级搜索（筛选）功能。
效果图：
是一位萌新，所有写的有点儿乱。（放在上面，供新手们参考，也是自己做一个记录。）
代码如下：














 
 
 
 
 
<%
 String secucode = request.getParameter("secucode");
 secucode = secucode == null ? "" : secucode;
 out.print("");
%>

 .last{
 border-right:none !important;
 }
 
 .search-title{
 position: relative; 
 height:40px;
 border-bottom: 1px solid #e6e6e6;
 }
 .search-title span{
 position:absolute;
 left:16px; 
 line-height:40px;
 }
 .search-title a{
 color:#01AAED;
 }
 .search-title a:hover{
 color:#5FB878;
 }
 .search-title ul{
 position: absolute;
 left:100px; 
 height:30px; 
 padding: 10px 0;
 }
 .search-title ul li{
 font-size: 12px;
 height: 18px;
 line-height: 18px;
 float: left;
 margin-left: 10px;
 border: 1px solid;
 cursor: pointer;
 border-radius: 10px;
 padding-left: 6px;;
 }
 .search-title ul li i{
 font-size: 12px;
 }
 #search-content{
 border-top:0px;
 padding-right:0;
 }
 #searchResult li:hover{
 border: 1px solid #01AAED;
 color: #01AAED;
 }
 #searchResult li b{
 font-weight: normal;
 padding-right: 2px;
 }
 
 #btn_fold{
 font-size:14px; 
 position: absolute; 
 cursor:pointer; 
 right:30px;
 line-height:40px;
 }
 
 .search-name{
 float:left;
 display: block;
 width:90px; 
 line-height:40px;
 }
 #fundtype{
 border-bottom: 1px solid #e6e6e6;
 height: auto;
 padding-bottom:10px;
 }
 #fundtype ul{
 line-height: 50px;
 padding-left:90px;
 }
 #fundtype ul li{
 float: left;
 width: 95px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 cursor: pointer;
 margin-right: 10px;
 margin-top: 4px;
 background-color: #eeeeee;
 }
 #fundtype ul li a{
 cursor: pointer;
 }
 
 #fundcompany{
 border-bottom: 1px solid #e6e6e6;
 }
 
 .fundcompany-content a{
 padding: 0 20px;
 cursor: pointer;
 border-right: 1px solid #d4d4d4; 
 }
 
 #fundyeji{
 border-bottom: 1px solid #e6e6e6;
 }
 .fundyeji-content a{
 padding: 0 30px;
 cursor: pointer;
 }
 
 #fundstar{
 border-bottom: 1px solid #e6e6e6;
 height: auto;
 padding: 10px 0;
 }
 #fundstar ul{
 line-height: 50px;
 padding-left:90px;
 }
 #fundstar ul li{
 float: left;
 width: 95px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 cursor: pointer;
 margin-right: 10px;
 margin-top: 4px;
 background-color: #eeeeee;
 }
 #fundstar ul li a{
 cursor: pointer;
 }
 
 .layui-tab-title li{
 min-width:10px;
 padding: 0 10px;
 }
 
 .layui-tab-content{
 border-left: 1px solid #e6e6e6;
 border-right: 1px solid #e6e6e6;
 border-bottom: 1px solid #e6e6e6;
 }
 .layui-input{
 width:90px;
 }
 .layui-input-inline{
 width:60px;
 }
 .layui-form-label{
 padding: 9px 0;
 width:60px;
 text-align: center;
 }
 .active{
 background-color: #01AAED !important;
 color: #fff !important;
 }
 .choice{
 background-color: #01AAED !important;
 color: #fff !important;
 }
 .choicecom{
 color: #5FB878;
 text-decoration: underline;
 }
 
 .savedcond{
 cursor:pointer;
 line-height: 24px;
 padding: 0 4px 0 8px;
 margin: 5px 10px;
 display: block;
 background-color: #EEEEEE;
 color: #A6AAB8;
 border-radius: 12px;
 max-width: 100%;
 text-overflow: ellipsis;
 overflow: hidden;
 position: relative;
 text-align: center;
 }
 .savedcond:hover{
 background-color: #aaa;
 color: #fff;
 }
 .savedcond i{
 float: right;
 }
 .savedcond i:hover{
 color: #FF5722;
 }
 
 .clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}





 
 
 所有条件 
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 清空所有条件
  收起
 
 
 
 
 
 
 基金类型：
 
 不限
 货币型
 纯债型
 一级债
 二级债
 股票型
 混合型
 封闭式
 指数型
 QDII
 
 
 
 
 
 基金公司：
 
  
 热门
 
 
 不限
 
 
  华夏
  嘉实
  易方达
  南方
  中银
  广发
  工银瑞信
  博时
  华安
  汇添富
 
  
 
 
 
 
 
 基金业绩：
 
 
 
 近1周
 近1月
 近3月
 近6月
 今年以来
 近1年
 近2年
 近3年
 自定义
 
 不限
 
 
 不限
  前10名
  前20名
  前50名
  前100名
 
 
  不限
  前10名
  前20名
  前50名
  前100名
 
 
  不限
  前10名
  前20名
  前50名
  前100名
 
 
  不限
  前10名
  前20名
  前50名
  前100名
 
 
  不限
  前10名
  前20名
  前50名
  前100名
 
 
  不限
  前10名
  前20名
  前50名
  前100名
 
 
  不限
  前10名
  前20名
  前50名
  前100名
 
 
  不限
  前10名
  前20名
  前50名
  前100名
 
 
  
  日期
  
  
  
  至
  
  
  
    
  收益率：
  
  
  
  至
  
  
  
  
  
 
 
 
 
 
 
 
 基金评级：
 
 不限
 ★
 ★★
 ★★★
 ★★★★
 ★★★★★
 
 
 
 
 
 
 
 
 
 
 
 
 
 保存的搜索
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
基于layui实现高级搜索（筛选）功能

JavaScript相关栏目本月热门文章
