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

这篇文章主要为大家详细介绍了基于layui实现高级搜索、筛选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

基于layui写的一个高级搜索（筛选）功能。

效果图：

是一位萌新，所有写的有点儿乱。（放在上面，供新手们参考，也是自己做一个记录。）

代码如下：

   <base href="" rel="external nofollow"/><link rel="SHORTCUT ICON" href="favicon.ico"/><!--  --><link rel="stylesheet" href="common/layuiadmin/layui/css/layui.css" type="text/css"><link rel="stylesheet" href="common/jajxjs/css/jxlayui.css" type="text/css">  .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实现高级搜索（筛选）功能的详细内容，更多请关注本站其它相关文章！