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

Posted in Javascript onJuly 26, 2019
基于layui写的一个高级搜索（筛选）功能。
效果图：
基于layui实现高级搜索（筛选）功能
是一位萌新，所有写的有点儿乱。（放在上面，供新手们参考，也是自己做一个记录。）
代码如下：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<base href="<%=basePath%>" rel="external nofollow" />

<title></title>
<link rel="SHORTCUT ICON" href="<%=basePath%>favicon.ico" />
<!--
<link rel="stylesheet" type="text/css" href="fundstyle.css" />
-->
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="This is my page" />

 <link rel="stylesheet" href="<%=basePath %>common/layuiadmin/layui/css/layui.css" type="text/css">
 <link rel="stylesheet" href="<%=basePath %>common/jajxjs/css/jxlayui.css" type="text/css">
 <script type="text/javascript" src="<%=basePath%>common/jquery-ui/js/jquery.min.js"></script>
 <script src="<%=basePath %>common/layuiadmin/layui/layui.js"></script>
 <script type="text/javascript" src="<%=basePath%>common/jajxjs/jxpubjs.js"></script>
<%
 String secucode = request.getParameter("secucode");
 secucode = secucode == null ? "" : secucode;
 out.print("<script language='javascript'>var secucode='" + secucode
 + "';</script>");
%>
<style 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;}
</style>
<script type="text/javascript">
 layui.config({
 base: 'common/layuiadmin/',
 }).extend({
 excel: 'modules/excel',
 xlsx: 'modules/xlsx',
 FileSaver: 'modules/FileSaver',
 suggestbind : 'lib/suggestbind',
 index : 'lib/index'
 });
</script>
</head>
<body>
<div class="layui-collapse" style="width:99%;height:100%; margin:0 auto; background-color: white">
 <div class="layui-colla-item">
 <div class="search-title">
 <span>所有条件 
 <i class="layui-icon layui-icon-triangle-r"></i> </span>
 <ul id="searchResult">
 <li style="display:none"><b id="typetext"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="companytext"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="yeji_1z"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="yeji_1y"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="yeji_3y"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="yeji_6y"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="yeji_jin"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="yeji_1n"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="yeji_2n"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="yeji_3n"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="yeji_zi"></b><i class="layui-icon layui-icon-close"></i></li>
 <li style="display:none"><b id="startext"></b><i class="layui-icon layui-icon-close"></i></li>
 </ul>
 <a style="position: absolute; right:100px;padding-right:20px;line-height: 40px;border-right:1px solid #e6e6e6;cursor:pointer;" class="" id="resetsearch"">清空所有条件</a>
 <a class="layui-icon layui-icon-up" id="btn_fold" onclick="foleType();"> 收起
 </a>
 </div>
 
 <div id="search-content" class="layui-colla-content layui-show">
 <div style="width:86%;border-right:1px solid #e6e6e6;float:left;">
 <div id="fundtype" class="search-condition">
 <span class="search-name">基金类型：</span>
 <ul>
 <li class="active">不限</li>
 <li typeid="0">货币型</li>
 <li typeid="1">纯债型</li>
 <li typeid="2">一级债</li>
 <li typeid="3">二级债</li>
 <li typeid="4">股票型</li>
 <li typeid="5">混合型</li>
 <li typeid="6">封闭式</li>
 <li typeid="7">指数型</li>
 <li typeid="8">QDII</li>
 </ul>
 <div class="clearfloat"></div>
 </div>
 
 <div id="fundcompany" class="search-condition">
 <span class="search-name">基金公司：</span>
 <div class="layui-tab layui-tab-card" style="width:90%;margin-left:90px;position:relative;">
 <ul id="fundcomptitle" class="layui-tab-title"> 
 <li class="layui-this" style="margin-left:100px;">热门</li>
 
 </ul>
 <a compid="0" class="layui-btn layui-btn-primary active companyname" style="position:absolute;top:0;left:0;width:95px;height:40px;">不限</a>
 <div id="fundcompname" class="layui-tab-content fundcompany-content">
 <div id="fundcompany-hot" class="layui-tab-item layui-show">
  <a class="companyname" compid="80000222">华夏</a>
  <a class="companyname" compid="80000223">嘉实</a>
  <a class="companyname" compid="80000229">易方达</a>
  <a class="companyname" compid="80000220">南方</a>
  <a class="companyname" compid="80048752">中银</a>
  <a class="companyname" compid="80000248">广发</a>
  <a class="companyname" compid="80064225">工银瑞信</a>
  <a class="companyname" compid="80000226">博时</a>
  <a class="companyname" compid="80000228">华安</a>
  <a class="companyname last" compid="80053708">汇添富</a>
 </div>
  
 </div>
 </div>
 </div>
 
 <div id="fundyeji" class="search-condition">
 <span class="search-name">基金业绩：</span>
 <div class="layui-tab layui-tab-card" lay-filter="jijinyeji" style="width:90%;margin-left:90px;position: relative;">
 <ul class="layui-tab-title">
 
 <li fundsign="yeji_1z" style="margin-left:100px;">近1周</li>
 <li fundsign="yeji_1y">近1月</li>
 <li fundsign="yeji_3y">近3月</li>
 <li fundsign="yeji_6y">近6月</li>
 <li fundsign="yeji_jin">今年以来</li>
 <li fundsign="yeji_1n">近1年</li>
 <li fundsign="yeji_2n">近2年</li>
 <li fundsign="yeji_3n">近3年</li>
 <li fundsign="yeji_zi">自定义</li>
 </ul>
 <a yejiid="0" class="layui-btn layui-btn-primary active fundyeji" style="position:absolute;top:0;left:0;width:95px;height:40px;">不限</a>
 <div class="layui-tab-content fundyeji-content">
 <div class="layui-tab-item">
 <a class="choicecom">不限</a>
  <a>前10名</a>
  <a>前20名</a>
  <a>前50名</a>
  <a>前100名</a>
 </div>
 <div class="layui-tab-item">
  <a class="choicecom">不限</a>
  <a>前10名</a>
  <a>前20名</a>
  <a>前50名</a>
  <a>前100名</a>
 </div>
 <div class="layui-tab-item">
  <a class="choicecom">不限</a>
  <a>前10名</a>
  <a>前20名</a>
  <a>前50名</a>
  <a>前100名</a>
 </div>
 <div class="layui-tab-item">
  <a class="choicecom">不限</a>
  <a>前10名</a>
  <a>前20名</a>
  <a>前50名</a>
  <a>前100名</a>
 </div>
 <div class="layui-tab-item">
  <a class="choicecom">不限</a>
  <a>前10名</a>
  <a>前20名</a>
  <a>前50名</a>
  <a>前100名</a>
 </div>
 <div class="layui-tab-item">
  <a class="choicecom">不限</a>
  <a>前10名</a>
  <a>前20名</a>
  <a>前50名</a>
  <a>前100名</a>
 </div>
 <div class="layui-tab-item">
  <a class="choicecom">不限</a>
  <a>前10名</a>
  <a>前20名</a>
  <a>前50名</a>
  <a>前100名</a>
 </div>
 <div class="layui-tab-item">
  <a class="choicecom">不限</a>
  <a>前10名</a>
  <a>前20名</a>
  <a>前50名</a>
  <a>前100名</a>
 </div>
 <div class="layui-tab-item layui-form">
  <div class="layui-form-item">
  <label class="layui-form-label">日期</label>
  <div class="layui-input-inline" style="width:90px;">
  <input type="text" name="title" autocomplete="off" class="layui-input">
  </div>
  <label class="layui-form-label">至</label>
  <div class="layui-input-inline" style="width:90px;">
  <input type="text" name="title" autocomplete="off" class="layui-input">
  </div>
  <label class="layui-form-label">  </label>
  <label class="layui-form-label">收益率：</label>
  <div class="layui-input-inline" style="width:90px;">
  <input type="text" name="title" autocomplete="off" class="layui-input">
  </div>
  <label class="layui-form-label">至</label>
  <div class="layui-input-inline" style="width:90px;">
  <input type="text" name="title" autocomplete="off" class="layui-input">
  </div>
  <label class="layui-form-label"></label>
  <button class="layui-btn">确定</button>
 </div>
 </div>
 </div>
 </div>
 </div>
 
 <div id="fundstar" class="search-condition">
 <span class="search-name">基金评级：</span>
 <ul>
 <li class="active">不限</li>
 <li starid="1">★</li>
 <li starid="2">★★</li>
 <li starid="3">★★★</li>
 <li starid="4">★★★★</li>
 <li starid="5">★★★★★</li>
 </ul>
 <div class="clearfloat"></div>
 </div>
 
 <div style="width:100%;padding-top:10px;">
 <div style="width:220px;margin:0 auto;">
 <button id="savecondition" style="background-color: #5FB878;width:100px;" class="layui-btn ">保存</button>
 <button id="searchOk" style="width:100px;" class="layui-btn layui-btn-warm">确定</button>
 </div>
 </div>
 </div>
 <div style="float:left;width:13%;height:100%;">
 <dl style="width:100%;padding-left:4px;">
 <dt style="text-align: center">保存的搜索</dt>
 <dd id="savedsearch">
 </dd>
 </dl>
 </div>
 <div class="clearfloat"></div>
 </div>
 </div>
 
</div>
<script>
 var keyObj = {'fundtype':'','fundtypeid':'','fundcompany':'','fundcompanyid':'','yeji_1z':'','yeji_1y':'','yeji_3y':'','yeji_6y':'','yeji_jin':'','yeji_1n':'','yeji_2n':'','yeji_3n':'','yeji_zi':'','fundstar':'','starid':''};
 layui.use(['suggestbind','layer', 'form', 'element','laydate'], function(){
 var layer = layui.layer
 ,form = layui.form
 ,jxtable = layui.jxtable
 ,element = layui.element
 var laydate = layui.laydate; 
 window.$ = layui.jquery;
 
 element.on('tab(jijinyeji)', function(){
 var fundsign = $(this).attr("fundsign");
 var textname = $(this).text()+"：";
 $("#fundyeji .layui-tab-item").removeClass("layui show");
 
 fundyeji(fundsign,textname);
 });
 
 });
 
 function fundyeji(fundsign,textname){
 $("#fundyeji .layui-show a").click(function(){
 var isChoose = $(this).hasClass("choicecom");
 console.log(isChoose);
 console.log($(this).index());
 if($(this).index() !== 0){
 if(!isChoose){
 $(this).siblings().removeClass("choicecom");
 $(".fundyeji").removeClass("active");
 $(this).addClass("choicecom");
 var arr =[];
 arr.push($(this).text());
 keyObj["'"+fundsign+"'"] = arr;
 $("#"+fundsign).parent().css("display","block");
 $("#"+fundsign).text(textname+keyObj["'"+fundsign+"'"]);
 $("#"+fundsign).attr("title",keyObj["'"+fundsign+"'"]);
 }else{
 $(this).removeClass("choicecom");
 $(this).parent().find("a").eq(0).addClass("choicecom");
 $(".fundyeji").addClass("active");
 keyObj["'"+fundsign+"'"] = '';
 $("#"+fundsign).parent().css("display","none");
 }
 }else{
 $(this).siblings().removeClass("choicecom");
 $(this).addClass("choicecom");
 keyObj["'"+fundsign+"'"] = '';
 $("#"+fundsign).parent().css("display","none");
 }
 });
 }
 var parentdata = window.parent.toIframe();
 var pd = parentdata.split("-");
 var uid = pd[0];
 var moduleid = pd[1];
 
 //收起和展开
 function foleType(){
 if($("#search-content").hasClass("layui-show")){
 $("#btn_fold").text(" 展开");
 $("#btn_fold").removeClass("layui-icon layui-icon-up").addClass("layui-icon layui-icon-down");
 $("#search-content").removeClass("layui-show")
 }
 else{
 $("#btn_fold").text(" 收起");
 $("#btn_fold").removeClass("layui-icon layui-icon-down").addClass("layui-icon layui-icon-up");
 $("#search-content").addClass("layui-show")
 }
 }
 
 $(function(){
 //选择基金类型
 $("#fundtype ul li").click(function(){
 var isChoose = $(this).hasClass("choice"); 
 var chooseLen = null;
 var $parent = $(this).parent();
 
 if($(this).index()!==0){
 $(this).siblings().removeClass("active");
 if(!isChoose){
 $(this).addClass("choice");
 }else{
 $(this).removeClass("choice");
 }
 chooseLen = $parent.children('.choice').length;
 if(chooseLen==0){
 $("#typetext").parent().css("display","none");
 $parent.children('li').eq(0).addClass('active');
 }
 var hasActive = null;
 hasActive = $parent.children('.active').length>0;
 if(hasActive){
 keyObj['fundtype'] = '';
 keyObj['fundtypeid'] = '';
 $("#typetext").parent().css("display","none");
 }else{
 var arr =[];
 var arr2 = [];
 $("#typetext").parent().css("display","block");
 $parent.children('.choice').each(function(index,item){
 arr.push($(item).text());
 arr2.push($(item).attr("typeid"));
 });
 keyObj['fundtype'] = arr;
 keyObj['fundtype'] = arr.join(',');
 keyObj['fundtypeid'] = arr2;
 keyObj['fundtypeid'] = arr2.join(',');
 }
 
 showText(keyObj.fundtype, "#typetext", "类型：");
 }
 else{
 $(this).addClass("active");
 $(this).siblings().removeClass("choice");
 keyObj['fundtype'] = '';
 keyObj['fundtypeid']='';
 $("#typetext").parent().css("display","none");
 }
 
 });
 
 //选择基金公司
 function choosecompany(){
 $("#fundcompany a").click(function(){
 var isChoose = $(this).hasClass("choicecom"); 
 var chooseLen = null;
 var $parent = $("#fundcompany");
 if($(this).attr("compid")!=='0'){
 $("#fundcompany a").removeClass("active");
 if(!isChoose){
 $(this).addClass("choicecom");
 }else{
 $(this).removeClass("choicecom");
 }
 chooseLen = $("#fundcompany a.choicecom").length;
 if(chooseLen==0){
 $("#fundcompany a").eq(0).addClass('active');
 $("#companytext").parent().css("display","none");
 }
 
 var hasActive = null;
 hasActive = $("#fundcompany a.active").length>0;
 var arr =[];
 var arr2 = [];
 if(hasActive){
 keyObj['fundcompany'] = '';
 keyObj['fundcompanyid']='';
 $("#companytext").parent().css("display","none");
 }else{
 $("#companytext").parent().css("display","block");
 $("#fundcompany a.choicecom").each(function(index,item){
 arr.push($(item).text());
 arr2.push($(item).attr("compid"));
 });
 keyObj['fundcompany'] = arr;
 keyObj['fundcompany'] = arr.join(',');
 keyObj['fundcompanyid'] = arr2;
 keyObj['fundcompanyid'] = arr2.join(',');
 }
 
 showText(keyObj.fundcompany, "#companytext", "公司：");
 
 }else{
 $("#fundcompany a").eq(0).addClass("active")
 $("#fundcompany a").removeClass("choicecom");
 keyObj['fundcompany'] = '';
 keyObj['fundcompanyid']='';
 $("#companytext").parent().css("display","none");
 }
 
 });
 }
 
 //选择基金评级
 $("#fundstar ul li").click(function(){
 var isChoose = $(this).hasClass("choice"); 
 var chooseLen = null;
 var $parent = $(this).parent();
 
 if($(this).index()!==0){
 $(this).siblings().removeClass("active");
 if(!isChoose){
 $(this).addClass("choice");
 }else{
 $(this).removeClass("choice");
 }
 chooseLen = $parent.children('.choice').length;
 if(chooseLen==0){
 $("#startext").parent().css("display","none");
 $parent.children('li').eq(0).addClass('active');
 }
 var hasActive = null;
 hasActive = $parent.children('.active').length>0;
 if(hasActive){
 keyObj['fundstar'] = '';
 keyObj['starid'] = '';
 $("#startext").parent().css("display","none");
 }else{
 var arr =[];
 var arr2 = [];
 $("#startext").parent().css("display","block");
 $parent.children('.choice').each(function(index,item){
 arr.push($(item).text());
 arr2.push($(item).attr("starid"));
 });
 keyObj['fundstar'] = arr;
 keyObj['fundstar'] = arr.join(',');
 keyObj['starid'] = arr2;
 keyObj['starid'] = arr2.join(',');
 }
 
 showText(keyObj.fundstar, "#startext", "评级：");
 }
 else{
 $(this).addClass("active");
 $(this).siblings().removeClass("choice");
 keyObj['fundstar'] = '';
 keyObj['starid']='';
 $("#startext").parent().css("display","none");
 }
 
 });
 
 //从数据库获取所有公司
 $.ajax({
 url: 'advancedsearch/getCompanyname.do',
 dataType: 'json',
 success: function(data){
 var comp = data_letter_sort(data.data,"cn");
 for (var key in comp) {
 var title = '';
 var str = '';
 var str2 = '';
 title = '<li>'+key+'</li>';
 $("#fundcomptitle").append(title);
 for(var j = 0; j < comp[key].length; j++){
  if(j == comp[key].length-1){
  str += '<a class="last" compid="'+comp[key][j].cid+'">'+comp[key][j].cname+'</a>';
  }else{
  str += '<a compid="'+comp[key][j].cid+'">'+comp[key][j].cname+'</a>';
  }
 }
 str2 = '<div id="fundcompany-'+key+'" class="layui-tab-item">'+str
  +'</div>';
 $("#fundcompname").append(str2);
 }
 
 choosecompany();
 }
 });
 
 //获取json数组的长度
 function getJsonLength(jsonData){
 var jsonLength = 0;
 for(var item in jsonData){
  jsonLength++;
 }
 return jsonLength;
 } 
 
 function data_letter_sort (data, field) {
 var letter_reg = /^[A-Z]$/;
 var list = new Array();
 for (var i = 0; i < data.length; i++) {
  // 添加 # 分组，用来 存放 首字母不能 转为 大写英文的 数据
  list[''] = new Array();
  // 首字母 转 大写英文
  letter = (data[i][field]).substr(0, 1).toUpperCase();
  // 是否 大写 英文 字母
  if (!letter_reg.test(letter)) {
  letter = '#';
  }
  // 创建 字母 分组
  if (!(letter in list)) {
  list[letter] = new Array();
  }
  // 字母 分组 添加 数据
  list[letter].push(data[i]);
 }
 // 转换 格式 进行 排序；
 var resault = new Array();
 for (var key in list) {
  resault.push({
  letter: key,
  list: list[key]
  });
 }
 resault.sort(function (x, y) {
  return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
 });
 // # 号分组 放最后
 var last_arr = resault[0];
 resault.splice(0, 1);
 resault.push(last_arr);
 
 // 转换 数据 格式
 var json_sort = {}
 for (var i = 0; i < resault.length; i++) {
  json_sort[resault[i].letter] = resault[i].list;
 }
 
 return json_sort;
 }

 });
 
 //清空条件方法
 function clearCondition(id){
 if("typetext"==id){
 $("#fundtype ul li").removeClass("choice");
 $("#fundtype ul li").eq(0).addClass("active");
 keyObj['fundtype']='';
 keyObj['fundtypeid']='';
 }else if("companytext"==id){
 $("#fundcompany a").removeClass("choicecom");
 $("#fundcompany a").eq(0).addClass("active")
 keyObj['fundcompany']='';
 keyObj['fundcompanyid']='';
 }else if("startext"==id){
 $("#fundstar ul li").removeClass("choice");
 $("#fundstar ul li").eq(0).addClass("active")
 keyObj['fundstar']='';
 keyObj['starid']='';
 }
 
 }
 
 //点击已选条件清除该条件
 $("#searchResult li").each(function(){
 $(this).click(function(){
 var showId = $(this).children("b").attr("id");
 $("#"+showId).parent().css("display","none");
 clearCondition(showId);
 })
 });
 
 //清空所有条件
 $("#resetsearch").click(function(){
 $("#typetext").parent().css("display","none");
 clearCondition("typetext");
 $("#companytext").parent().css("display","none");
 clearCondition("companytext");
 $("#startext").parent().css("display","none");
 clearCondition("startext");
 });
 
 //条件超出两个显示省略号（光标放在上面显示完整条件 ）
 function showText(value, id, titlename){
 var arr = value.split(",");
 if(arr.length<3){
 $(id).text(titlename+value);
 }else{
 $(id).text(titlename+arr[0]+","+arr[1]+"···");
 }
 $(id).attr("title",value); 
 }
 
 //保存条件
 $("#savecondition").click( function(){
 layer.confirm("是否保存搜索条件？", {
 btn: ['确定','取消'] //按钮
 }, function(index){
 layer.prompt({
 formType: 0,
 value: '',
 title: '请输入保存名称',
 }, function(value, index, elem){
  $.ajax({
  url:'advancedsearch/saveCondition.do',
  data:{
  uid: uid,
  moduleid: moduleid,
  value: value,
  keyObj: JSON.stringify(keyObj)
  },
  dataType: 'json',
  success: function(data){
  if(data.info == "success"){
  layer.alert("保存成功！");
  showSearchName();
  }else{
  layer.alert(data.info);
  }
  }
  });
  layer.close(index);
 });
 layer.close(index);
 });
 });
 
 //保存的搜索显示
 showSearchName();
 function showSearchName(){
 $("#savedsearch").text("");
 $.ajax({
 url:'advancedsearch/getSavedData.do',
 data: {
 uid: uid,
 moduleid: moduleid
 },
 dataType: 'json',
 success: function(data){
 for(var i =0; i < data.data.length; i++){
 var str = '<a class="savedcond">'+data.data[i].searchname+'<i class="layui-icon layui-icon-close-fill"></i></a>';
 $("#savedsearch").append(str);
 }
 saveSearch();
 delCondition();
 }
 });
 }
 
 //点击保存的搜索标签，回显相应的搜索条件
 function saveSearch(){
 $(".savedcond").click( function(){
 $.ajax({
 url:'advancedsearch/getSearchData.do',
 data:{searchname: $(this).text()},
 dataType: 'json',
 success: function(data){
 var searchdata = data.data[0].searchparams;
 var typeid = searchdata['fundtypeid'].split(",");
 var compid = searchdata['fundcompanyid'].split(",");
 var starid = searchdata['starid'].split(",");
 showCondition("#fundtype ul li", typeid, "typeid", "choice");
 showCondition("#fundcompany a", compid, "compid", "choicecom");
 showCondition("#fundstar ul li", starid, "starid", "choice");
 keyObj = searchdata;
 $("#typetext").parent().css("display","block");
 $("#companytext").parent().css("display","block");
 $("#startext").parent().css("display","block");
 showText(keyObj.fundtype, "#typetext", "类型：");
 showText(keyObj.fundcompany, "#companytext", "公司：");
 showText(keyObj.fundstar, "#startext", "评级：");
 }
 });
 });
 }
 
 //回显条件方法
 function showCondition(dom, keyArr, attr, style){
 $(dom).siblings().removeClass(style);
 $(dom).each(function(){
 for(var i = 0; i< keyArr.length; i++){
 if($(this).attr(attr)==keyArr[i]){
 $(dom).eq(0).removeClass("active");
 $(this).addClass(style);
 }
 }
 });
 }
 
 function delCondition(){
 $(".savedcond i").click( function(event){
 event.stopPropagation();
 var delname = $(this).parent().text();
 $.ajax({
 url: 'advancedsearch/delCondition.do',
 data: {
 uid: uid,
 moduleid: moduleid,
 value: delname
 },
 dataType: 'json',
 success: function(data){
 if(data.info == 'success'){
 layer.alert("删除成功！");
 }else{
 layer.alert(data.info);
 }
 showSearchName();
 }
 });
 });
 }
 
 function toParent(){
 return keyObj;
 }
 
 $("#searchOk").click(function(){
 console.log(keyObj);
 window.parent.reloadByAdvance();
 });
 
 </script>

</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
基于layui实现高级搜索（筛选）功能
- Author -
Rjxxxx。
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Javascript 相关文章推荐
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
jQuery代码优化事件委托篇
Nov 01 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
12306 刷票脚本及稳固刷票脚本（防挂）
Jan 04 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
微信小程序如何获取网络状态
Jul 26 #Javascript
layui使用数据表格实现购物车功能
Jul 26 #Javascript
layui实现数据表格点击搜索功能
Mar 26 #Javascript
vue eslint简要配置教程详解
Jul 26 #Javascript
vue移动端城市三级联动组件使用详解
Jul 26 #Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 #Javascript
layui实现下拉框三级联动
Jul 26 #Javascript