First of all, we need to make it clear that the search box sends a Get request based on keywords, and sends a Get request to the current page

//The sample code request path is the current page path "/ product" 
<! -- search box get requests to search based on the keywords of the product name -- >
<form action="/product" class="form-inline pull-left" >
   < input type = "text" name = "product name" placeholder = "product name" class = "form control" value = "${param. Product name}" >
   <button class="btn btn-primary"><i class="fa fa-search"></i></button>
</form>

When we want to realize the multi criteria search function, we can encapsulate the search criteria into a Map set, and then search according to the Map set

image.png

Controller layer code:

    @GetMapping("/product")
    public String list(@RequestParam(required = false,defaultValue = "1",name = "p")Integer pageNo,
                       @RequestParam(required = false,defaultValue = "")String productName,
                       @RequestParam(required = false,defaultValue = "")String place,
                       @RequestParam(required = false,defaultValue = "")Integer typeId,
                       @RequestParam(required = false,defaultValue = "")BigDecimal minPrice,
                       @RequestParam(required = false,defaultValue = "")BigDecimal maxPrice,
                       Model model) {
        Map<String,Object> searchParam = new HashMap<>();
        searchParam.put("productName",productName);
        searchParam.put("place",place);
        searchParam.put("typeId",typeId);
        searchParam.put("minPrice",minPrice);
        searchParam.put("maxPrice",maxPrice);

        PageInfo<Kaola> pageInfo = kaolaService.findByPageNo(pageNo,searchParam);
        model.addAttribute("pageInfo",pageInfo);
        return "product/list";
    }

Business layer code:

public PageInfo<Kaola> findByPageNo(Integer pageNo, Map<String, Object> searchParam) {
        PageHelper.startPage(pageNo,10);
        List<Kaola> kaolaList = kaolaMapper.findBySearchParamWithType(searchParam);
        return new PageInfo<>(kaolaList);
}

mapper.xml in MyBatis:

<select id="findBySearchParamWithType" resultType="com.kaishengit.entity.Kaola">
        SELECT
            kaola.*, kaola_type.id AS 'kaolaType.id',
            kaola_type.type_name AS 'kaolaType.typeName',
            parent_id AS 'kaolaType.parentId'
        FROM
            kaola
        INNER JOIN kaola_type ON kaola.type_id = kaola_type.id
        <where>
            <if test="productName != null and productName != ''">
                kaola.product_name LIKE concat('%',#{productName},'%')
            </if>
            <if test="place != null and place != ''">
                and kaola.place = #{place}
            </if>
            <if test="typeId != null and typeId != ''">
                and kaola.type_id = #{typeId}
            </if>
            <if test="minPrice !=null and minPrice != ''">
                <![CDATA[ and kaola.price >= #{minPrice} ]]>
            </if>
            <if test="maxPrice !=null and maxPrice != ''">
                <![CDATA[ and kaola.price <= #{maxPrice} ]]>
            </if>
        </where>
        ORDER BY kaola.id DESC
</select>

In this way, the multi criteria search function can be realized from the front end to the back end. We will also encounter such a situation that when entering search criteria, the display list will constantly refresh automatically. Here, it is applied to Ajax related content. During the input process, AJAX requests will be sent out continuously, and then the page will be refreshed.

<input type="text" name="productName" placeholder="Commodity name" class="form-control" value="${param.productName}">

value="${param.productName}" is to obtain the value from the parameters of the request url, and realize the function of refreshing the page to display keywords after inputting keyword search, as shown in the figure above:

image.png

When inputting Chinese keywords for search, you can use encodeuriccomponent to solve the problem of displaying Chinese characters in url path:

//paging
$('#pagination-demo').twbsPagination({
    totalPages: ${pageInfo.pages},
    visiblePages: 10,
    first:'home page',
    last:'Last',
    prev:'previous page',
    next:'next page',
    href:"?productName="+encodeURIComponent('${param.productName}')+"&place="+encodeURIComponent('${param.place}')
    + "&typeId=${param.typeId}&minPrice=${param.minPrice}&maxPrice=${param.maxPrice}&p={{number}}"
});

click to enlarge

search result