[前端筆記] 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"οnkeyup="dosearch()" >
        <span class="am-input-group-btn">
                <button class="am-btn am-btn-secondary" type="button" οnclick="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>