[前端笔记] jsp页面对后台数据动态搜索显示

在项目中我们获取到后台返回的一个List集合，对它进行遍历显示！因为数据较多，用户进行访问，查询自己需要的数据不是很友好。

 

废话不多说，直接给代码，我相信如果你能看到我这篇文章，后台代码基本就不会有任何问题。

 

首先在自己需要的位置添加搜索框！

 

<!-- 按钮 -->
<div class="am-input-group am-input-group-primary" style="height:32px;width:312px;float:right">
        <input type="text" class="am-form-field am-input-sm"" id="search"onkeyup="dosearch()" >
        <span class="am-input-group-btn">
                <button class="am-btn am-btn-secondary" type="button" onclick="dosearch()">查询</button>
        </span>
</div>

 

遍历的后台数据在html渲染

 

<!--循环遍历信息-->
<ul class="am-avg-sm-2am-avg-md-4 am-avg-lg-6 am-margin gallery-list" id="ff">
        <c:forEachvar="item" items="${farmInfoList}">
                <li><ahref='<c:url value="/main/${item.orgCode}/${item.farmOrg}/module"/>'> <img
                                class="am-img-thumbnailam-img-bdrs" src='<c:url value="/static/image/home.png"/>' alt="" /> <f:translate
                                        exp="item.farmName"var="translatedFarmName" />
                                <divclass="gallery-title">${fn:substring(translatedFarmName,0, 10)}</div>
                                <divclass="gallery-desc">${item.orgCode}${item.farmOrg }</div>
                </a></li>
        </c:forEach>
</ul>

 

js代码

 

<script type="text/javascript">

	function dosearch() {
		var txt = $("#search").val(); //获取搜索内容
		var i = 0; //定义序列动态id
		$("#ff li").each(
				function() {
					this.id = i; // 为每一个li 定义一个id标签
					i++;
					if ($.trim(txt) != "") {
						$('#' + this.id).hide().filter(":contains('" + txt + "')").show();  //通过过滤让符合条件的显示
					} else {
						$("li").show();  //若没有输入则全是不显示
					}
				})
	}
</script>