大家好，又见面了，我是你们的朋友全栈君。
不通过数据库，直接前端js模糊查询，实现以下效果
根据搜索条件查询结果：
jsp页面相关代码：
<div class=”search”>
<i class=”iconfont icon-search”>
<input type=”text” id=”resourceTitle” name=”resourceTitle” placeholder=”搜索资讯、公告” style=’border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ‘>
</i>
</div>
</header>
<!–header end–>
<!–article start–>
<article class=”s-article”>
<ul class=”s-edu”>
<li><i class=”li_info”></i>最新资讯</li>
<c:forEach items=”${pageList}” var=”list”>
<c:if test=”${list.columnCode eq 10001 }”>
<li><a href=”${basePath}resourceDetail.do?resourceId=${list.resourceId}&businessKey=${list.businessKey}”><span>[成人教育]</span>${list.resourceTitle}</a></li>
</c:if>
<c:if test=”${list.columnCode eq 10003 }”>
<li><a href=”${basePath}resourceDetail.do?resourceId=${list.resourceId}&businessKey=${list.businessKey}”><span>[学校公告]</span>${list.resourceTitle}</a></li>
</c:if>
<c:if test=”${list.columnCode eq 10004 }”>
<li><a href=”${basePath}resourceDetail.do?resourceId=${list.resourceId}&businessKey=${list.businessKey}”><span>[技能鉴定]</span>${list.resourceTitle}</a></li>
</c:if>
<c:if test=”${list.columnCode eq 10005 }”>
<li><a href=”${basePath}resourceDetail.do?resourceId=${list.resourceId}&businessKey=${list.businessKey}”><span>[技术前沿]</span>${list.resourceTitle}</a></li>
</c:if>
<c:if test=”${list.columnCode eq 10006 }”>
<li><a href=”${basePath}resourceDetail.do?resourceId=${list.resourceId}&businessKey=${list.businessKey}”><span>[教学动态]</span>${list.resourceTitle}</a></li>
</c:if>
</c:forEach>
</ul>
style=’border-left:0px;border-top:0px;border-right:0px;border-bottom:1px ‘ 去除文本框边框
js相关代码：
$(function(){
var $resourceTitle=$(“#resourceTitle”);
$resourceTitle.on(‘keyup’,function(){
var resourceTitle=$.trim($resourceTitle.val());
query();
})
function query(){
if(resourceTitle.length == 0){
$(“.s-edu”).find(“li”).find(“a”).show();
}else{
$(“.s-edu”).find(“li”).find(“a”)
.hide()
.filter(“:contains(‘”+$(“#resourceTitle”).val()+”‘)”)
.show();
}
}
})
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/139396.html原文链接：https://javaforall.net
