✅P189_商城业务-检索服务-页面价格区间搜索

价格区间搜索栏

cfmall-search/src/main/resources/templates/list.html

<input id="skuPriceFrom" type="number"
  th:value="${#strings.isEmpty(priceRange)?'':#strings.substringBefore(priceRange,'_')}"
  style="width: 100px; margin-left: 30px;"/> -
<input id="skuPriceTo" type="number"
  th:value="${#strings.isEmpty(priceRange)?'':#strings.substringAfter(priceRange,'_')}"
  style="width: 100px;"/>
<button id="skuPriceSearchBtn">确定</button>

搜索函数

$("#skuPriceSearchBtn").click(function () {
    // 1、拼上价格区间的查询条件
    var from = $("#skuPriceFrom").val();
    var to = $("#skuPriceTo").val();
    var query = from + "_" + to;
    location.href = replaceParamVal(location.href, "skuPrice", query);
});

---

价格回显

获取skuPirce的值；

priceRange="${param.skuPrice}}"

价格区间回显 ；

th:value="${#strings.isEmpty(priceRange)?'':#strings.substringBefore(priceRange,'_')}"

th:value="${#strings.isEmpty(priceRange)?'':#strings.substringAfter(priceRange,'_')}"

---

是否有库存

<a href="#" th:with="check = ${param.hasStock}">
    <input id="showHasStock" type="checkbox"
           th:checked="${#strings.equals(check,'1')?true:false}">
    仅显示有货
</a>

通过调用$(this).prop('checked')获取是否被选中，选中为true否则false

$("#showHasStock").change(function () {
    if ($(this).prop('checked')) {
        location.href = replaceParamVal(location.href, "hasStock", 1);
    } else {
        // 没选中，是否有货都要查询，及去除查询条件
        var re = eval('/(&hasStock=)([^&]*)/gi');
        location.href = (location.href + "").replace(re, '');
    }
    return false;
});

---

测试效果

选择价格区间，

仅显示有货：表中没货，所以没显示