JSP中实现关键字高亮显示

最新推荐文章于 2022-09-02 16:04:16 发布

凌云之音

最新推荐文章于 2022-09-02 16:04:16 发布

阅读量1.2k

点赞数 1

分类专栏： JSP

本文链接：https://blog.csdn.net/SilentWu/article/details/98615455

版权

JSP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先引入jstl标签库

search_result.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索结果</title>
<link href="resources/css/layui/css/layui.css" rel="stylesheet"
	type="text/css">
<link href="resources/css/nav.css" rel="stylesheet" type="text/css">
<script src="resources/css/layui/js/jquery-3.4.1.js"></script>
</head>
<body>
<form class="layui-form layui-form-pane" action="search_info.do">
    <div class="layui-form-item">
	<label class="layui-form-label">
            信息检索 <i class="layui-icon layui-icon-search"></i>
	</label>
	<div class="layui-input-block">
	    <input type="text" name="search_data" autocomplete="off"
				placeholder="请输入关键字回车搜索" class="layui-input">

	</div>
    </div>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>
	关键字：<span style="color: red;">${search_word}</span>的搜索结果 共<span style="color: red;">${search_count}</span>条
    </legend>
</fieldset>
<c:forEach items="${search_result}" var="info">
    <div style="padding: 20px; background-color: #F2F2F2;">
	<div class="layui-row layui-col-space15">
	    <div class="layui-col-md6">
	        <div class="layui-card">
		    <div class="layui-card-header">原始图片</div>
			<div class="layui-card-body">
			    <img src="resources/IMGS/${info.getImg_name()}"
				style="width: 70%;height:350px;">
			</div>
		    </div>
		</div>
	    <div class="layui-col-md6">
	        <div class="layui-card">
		    <div class="layui-card-header">文字内容</div>
		<div class="layui-card-body">${fn:replace(info.getInformation(), search_word, "<font color='red'>".concat(search_word).concat("</font>") )}
		</div>
		</div>
	    </div>
	</div>
    </div>
</c:forEach>
</body>
</html>

核心代码：将info.getInformation()中的search_word全部高亮显示

<div class="layui-card-body">${fn:replace(info.getInformation(), search_word, "<font color='red'>".concat(search_word).concat("</font>") )}
</div>

SearchController.java

/**
* 
* 搜索结果
* */
@RequestMapping(value="search_info.do",method=RequestMethod.GET)
    public String search_info(HttpServletRequest request,
        HttpServletResponse response,ModelMap model,String search_data) {
	List<InfoModel> search_info = infoService.getSearchResult(search_data);
	// 判断得到的list是否为空  防止list.size()出现空指针异常
	if(null!=search_info) {

		model.addAttribute("search_count",search_info.size());
		}
	model.addAttribute("search_result",search_info);
	model.addAttribute("search_word", search_data);		
	return "search_result";
}

凌云之音

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JSP中实现关键字高亮显示

首先引入jstl标签库search_result.jsp页面<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>...
复制链接

扫一扫