jquery实现页内搜索、css实现页内排序

一、查询功能

关于查询的CSS：

.category .category-item li.hide-li{display:none;}

关于查询的JS:

$（function(){
	//记录状态
	 if(!sessionStorage.getItem("catagoryMore")){
    	 $(".category-li li").each(function(i,e){
	    	 if($(e).index() > 10) $(e).addClass("hide-li");
	     })
	    $(".catagory-more").text("展开");
    }
	//点击显示与隐藏
	$(".catagory-more").click(function(){
    	$(".noResult").remove();
    	if($(this).text().trim() == "展开"){ 
    		$(".category-li li").removeClass("hide-li")
    	}else{
    		$(".category-li li").each(function(i,e){
   	    	   if($(e).index() > 10) $(e).addClass("hide-li")
   	     	})
    	}
    	$(this).text().trim() =="展开" ? $(this).text("折叠"):$(this).text("展开")
    	sessionStorage.setItem("catagoryMore","catagoryMore");
    })
    
	 //搜索框值有变化即触发列表查询
    $("#item-search").bind("input propertychange",function(event){
    	categorySearch();
    });
}）

//栏目列表左侧页内搜索
function categorySearch(){
	$(".category-li li").removeClass("hide-li").removeClass("show-li");
		$(".catagory-more").text("折叠")
	var tempKey = $("#item-search").val();
	var reg = new RegExp(tempKey,"ig");
	$(".category-li li").each(function(i,e){
		if(isNull($(e).find("a").text().trim().match(reg))) $(e).addClass("hide-li");
	})
	
}

HTML:

<form class="search-item-wrap">
	<input type="text" id="item-search" class="" placeholder="&emsp;输入查询的栏目">
	<input type="button" onclick="categorySearch()" class="fr tj" value="">
</form>
<div class="category-titwrap clear">
	<b class="category-tit fl">栏目标题</b> 
	<b class="fr row-num">栏目条数<span class="icon-shuangjiantouxia iconfont"></span></b> 
</div>
<ul class="category-li category-li-cn clear">
	<li class="active clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">28</span></span>
	</li>
	<li class="clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">2</span></span>
	</li>
	<li class="clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">3</span></span>
	</li>
	<li class="clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">3</span></span>
	</li>
	<li class="clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">5</span></span>
	</li>
	<li class="clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">28</span></span>
	</li>
	<li class="clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">28</span></span>
	</li>
	<li class="clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">2</span></span>
	</li>
	<li class="clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">10</span></span>
	</li>
	<li class="clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">28</span></span>
	</li>
	<li class="clear order">
		<a href="#"><b>论文</b></a>
		<span class="category-times mainColor">(<span id="1">28</span></span>
	</li>
</ul>
<a class="catagory-more">折叠</a>

二、利用CSS实现列表的排序（flex）

相关CSS：

.category .category-li{
	display:flex;
	flex-wrap: wrap;//为了让内容撑满后自动换行，默认是不换行的
}
.category .category-item li{flex-basis: 100%;}//让li撑起来

相关js：

$(function(){
	var nums = 0;
	$(".row-num").click(function(){
		var arrs =[];
		var lis =$(".category-li li");
		if(isNull(lis.attr("dataid"))){
			$(".category-li li").each(function(i,e){
		    	$(e).attr("dataid",$(e).find(".category-times span").text());
			})
		}
		
		nums++;
		$(".category-li li").each(function(i,e){
	        // console.log(i);
	        var id = $(e).attr("dataid");
	        if (nums % 2 == 0) {
	        	//升序
	        	lis[i].style.order = -id;
	        	//修改按钮的箭头图标
	        	$(".row-num span").removeClass("icon-xiangshangshuangjiantou");
	            $(".row-num span").addClass("icon-shuangjiantouxia");
	        } else {
	        	//降序
	        	lis[i].style.order = id;
	        	$(".row-num span").addClass("icon-xiangshangshuangjiantou");
	            $(".row-num span").removeClass("icon-shuangjiantouxia");
	            
	        }
	    })
	})
})

三、页面显示效果