1. 关键词搜索回显

1.1 语法说明

th:value给指定表单赋值。

#maps.containsKey(searchMap,'keywords'):判断map对象searchMap中是否包含keywords的key。

三元表达式：th:value="${#maps.containsKey(searchMap,'keywords')}? ${searchMap.keywords}:''"

1.2 搜索实现

用户输入关键词，后台会用searchMap接收，接收后，前台需要显示，我们可以把searchMap再存入到model中，在页面搜索框中回显搜索条件。

1)搜索条件存储：

修改com.xz.mall.search.controller.SearchController的search方法，将搜索条件存储到model中,具体代码如下:

@Autowired
private SkuSearchFeign skuSearchFeign;

/**
 * 搜索页面跳转
 */
@GetMapping
public String search(Model model, @RequestParam(required = false) Map<String, Object> searchMap) {
    //搜索
    RespResult<Map<String, Object>> resultMap = skuSearchFeign.search(searchMap);

    //组装用户访问的url
    model.addAttribute("url", UrlUtils.map2url("web/search", searchMap, "page"));
    model.addAttribute("urlsort", UrlUtils.map2url("web/search", searchMap, "sm","sfield", "page"));
    model.addAttribute("result", resultMap.getData());
    model.addAttribute("searchMap", searchMap);
    return "search";
}

2)页面搜索框配置

修改search.html的搜索框：

<form action="/web/search" class="sui-form form-inline">
    <!--searchAutoComplete-->
    <div class="input-append">
        <input type="text" name="keywords"
               th:value="${#maps.containsKey(searchMap,'keywords')}? ${searchMap.keywords}:''"
               id="autocomplete" class="input-error input-xxlarge"/>
        <button class="sui-btn btn-xlarge btn-danger" type="submit">搜索</button>
    </div>
</form>

3)展示优化

为了能够识别html标签，需要把之前的商品名字展示标签换成th:utext，示例代码如下：

<a target="_blank" href="item.html" th:utext="${item.name}"></a>

2. 搜索条件回显

2.1 语法说明

th:if:条件成立，则显示

th:unless:条件不成立则显示

th:each:循环（前面用过）

th:text:文本显示

2.2 实现条件回显

1)分类条件回显

分类条件在result.categoryList中，可以直接在页面回显，如果没有该对象，则不回显。

<div class="type-wrap" th:unless="${#maps.containsKey(searchMap,'category')}">
    <div class="fl key">分类</div>
    <div class="fl value">
        <div th:each="category:${result.categoryList}">
            <a th:href="@{${url}(category=${category})}" th:text="${category}"></a>
        </div>
    </div>
    <div class="fl ext"></div>
</div>

th:unless="${#maps.containsKey(searchMap,'category')}"如果查询结果中有category，则回显分类条件

2)品牌回显

品牌条件在result.brandList中，可以直接在页面回显，如果没有该对象，则不回显。

<div class="type-wrap logo" th:unless="${#maps.containsKey(searchMap,'brand')}">
    <div class="fl key brand">品牌</div>
    <div class="value logos">
        <ul class="logo-list">
            <li th:each="brand:${result.brandList}">
                <a th:href="@{${url}(brand=${brand})}" th:text="${brand}"></a>
            </li>
        </ul>
    </div>
    <div class="ext">
        <a href="javascript:void(0);" class="sui-btn">多选</a>
        <a href="javascript:void(0);">更多</a>
    </div>
</div>

3)规格回显

属性回显需要注意，如果用户没有输入该属性，才回显，如果输入了该属性，则不回显，属性是以attr_开始传入后台。

<div class="type-wrap" th:each="attr:${result.attrmaps}"
     th:unless="${#maps.containsKey(searchMap,'attr_'+attr.key)}">
    <div class="fl key" th:text="${attr.key}"></div>
    <div class="fl value">
        <ul class="type-list">
            <li th:each="opt:${attr.value}">
                <a th:href="@{${url}('attr_'+${attr.key}=${opt})}" th:text="${opt}"></a>
            </li>
        </ul>
    </div>
    <div class="fl ext"></div>
</div>

th:each="attr:${result.attrmaps}" th:unless="${#maps.containsKey(searchMap,'attr_'+attr.key)}",用户没有输入该属性，则循环输出

4)价格回显

<div class="type-wrap" `th:unless="${#maps.containsKey(searchMap,'price')}"`>
    <div class="fl key">价格范围</div>
    <div class="fl value">
        <ul class="type-list">
            <li>
                <a th:href="@{${url}(price='0-500元')}">0-500元</a>
            </li>
            <li>
                <a th:href="@{${url}(price='500-1000元')}">500-1000元</a>
            </li>
            <li>
                <a th:href="@{${url}(price='1000元以上')}">1000元以上</a>
            </li>
        </ul>
    </div>
    <div class="fl ext">
    </div>
</div>

th:unless="${#maps.containsKey(searchMap,'price')}"，没有输入价格，才回显。

总结：

本篇主要介绍了一下关键词搜索回显和搜索条件回显的具体操作。大家可以去实践一下，感受一下Thymeleaf标签渲染的魅力！

Thymeleaf标签渲染（对关键词搜索回显和搜索条件回显的具体操作）