搜索面板动态展示

SearchController中定义一个方法，进行数据查询同时携带数据跳转到数据页面。

基于leaf对数据进行渲染完成静态化显示

品牌

判断searchMap是否存在，存在则直接展示

searchMap中封装了用户的搜索条件，内部有搜索关键字

前端代码从search中取searchMap的值【${searchMap.keywords}】得到用户搜索关键字

判断【${#maps.containsKey(searchMap,'brand')}】searchMap有没有brand这个key

如果有值则取brand值【${searchMap.brand}】

接着判断searchMap有没有price这个key，一样的操作

然后是规格，这个可能存在多个，需要遍历searchMap【${searchMap}】，遍历每一个键值对为sm判断是否是取值为spec_开头【${#strings.startsWith(sm.key,'spec_')}】

如果是就取名称【${#strings.replace(sm.key,'spec_','')}】，把存在的%2B的内容替换为+【${#strings.replace(sm.value,'%2B','+')}】

<!--bread-->
<div class="bread">
    <ul class="fl sui-breadcrumb">
	<li>
	    <a href="#">全部结果</a>
	</li>
	<li class="active" th:if="${searchMap.keywords != null && searchMap.keywords != ''}"> 
            <span th:text="${searchMap.keywords}"></span>
        </li>
    </ul>
    <ul class="fl sui-tag">
        <li class="with-x" th:if="${#maps.containsKey(searchMap,'brand')}">
            品牌:<span th:text="${searchMap.brand}"></span>
            <a th:href="@{${#strings.replace(url,'&brand='+searchMap.brand,'')}}">×</a>
        </li>
	<li class="with-x" th:if="${#maps.containsKey(searchMap,'price')}">
            价格:<span th:text="${searchMap.price}"></span>
             <a th:href="@{${#strings.replace(url,'&price='+searchMap.price,'')}}">×</a>
        </li>
<!--规格-->
	<li class="with-x" th:each="sm:${searchMap}" th:if="${#strings.startsWith(sm.key,'spec_')}">
            <span th:text="${#strings.replace(sm.key,'spec_','')}"></span> : <span th:text="${#strings.replace(sm.value,'%2B','+')}"></span>
            <a th:href="@{${#strings.replace(url,'&'+sm.key+'='+sm.value,'')}}">×</a>
        </li>
    </ul>
    <form class="fl sui-form form-dark">
        <div class="input-control control-right">
            <input type="text" />
            <i class="sui-icon icon-touch-magnifier"></i>
        </div>
    </form>
</div>

规格

多个规格，每个规格有多个规格选项，用两层循环。第一层遍历规格类型对象，第二层遍历该对象中的属性值
搜索面板动态展示和搜索结果回写（面包屑）
已经选择品牌后，品牌信息就不需要再显示，否则显示，对其他参数同理。

先判断searchMap中有没有brand这个key，有则返回false，没有则返回true【th:unless="${#maps.containsKey(searchMap,'brand')}"】

当返回true时我们要显示brand，从result中获得brandList【${result.brandList}】

先判断searchMap中是否有数据

<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,brandSate:${result.brandList}">
                <a th:text="${brand}" th:href="@{${url}(brand=${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>          

显示规格信息

     * 原有数据
     *  [
     *         "{'颜色': '黑色', '尺码': '平光防蓝光-无度数电脑手机护目镜'}",
     *         "{'颜色': '红色', '尺码': '150度'}",
     *         "{'颜色': '黑色', '尺码': '150度'}",
     *         "{'颜色': '黑色'}",
     *         "{'颜色': '红色', '尺码': '100度'}",
     *         "{'颜色': '红色', '尺码': '250度'}",
     *         "{'颜色': '红色', '尺码': '350度'}",
     *         "{'颜色': '黑色', '尺码': '200度'}",
     *         "{'颜色': '黑色', '尺码': '250度'}"
     *     ]

转换为

     *    需要的数据格式
     *    {
     *        颜色:[黑色,红色],
     *        尺码:[100度,150度]
     *    }

判断spec.key不存在则显示规格信息【${#maps.containsKey(searchMap,'spec_'+spec.key)}】
从map中的set【${spec.value}】里取出每一个规格选项的值【${op}】

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