<form th:action="@{/coupons/users}" method="get" class="mb-4">
<div class="form-row">
<div class="col-md-4">
<input type="text" class="form-control" name="userEmail" placeholder="Search by User Email" th:value="${param.userEmail}">
</div>
<div class="col-md-4">
<select class="form-control" name="type">
<option value="" >All Types</option>
<option value="welcome" th:selected="${param.type != null and param.type == 'welcome'}">Welcome</option>
<option value="birthday" th:selected="${param.type != null and param.type == 'birthday'}">Birthday</option>
<option value="book" th:selected="${param.type != null and param.type == 'book'}">Book</option>
<option value="category" th:selected="${param.type != null and param.type == 'category'}">Category</option>
<option value="sale" th:selected="${param.type != null and param.type == 'sale'}">Sale</option>
</select>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
<div th:text="${param.type}">Type will be displayed here</div>
</div>
</form>
쿠폰목록 검색기능을 구현중에 thymeleaf를 사용하던중 계속 값을 받지 못하는 문제가 발생하였다.
어떤 문제냐 하면 검색을하면 검색옵션을 파라미터로 받아서 th:selected 기능을 이용하여 실제 선택되게끔 하려는 찰나에 자꾸 값을 받지못하여 default 값인 Alltype으로만 나오는 문제였다.
위 처럼 단순히 파라미터로 온값을 동등연산자로 비교하면 값이 제대로 나오지 못한다.
실제로 값을 못받는 것은 아니고 type will be displayed here라고 적힌 곳에 실제 값(param.type)을 받아오기는 한다.
이 문제를 해결하려면 해당 param의 type이 어떤유형의 데이터타입인지 체크하고 equals로 원하는 값인지 확인하면 해결된다.
<form th:action="@{/coupons/users}" method="get" class="mb-4">
<div class="form-row">
<div class="col-md-4">
<input type="text" class="form-control" name="userEmail" placeholder="Search by User Email" th:value="${param.userEmail}">
</div>
<div class="col-md-4">
<select class="form-control" name="type">
<option value="" >All Types</option>
<option value="welcome" th:selected="${#strings.equals(param.type, 'welcome')}">Welcome</option>
<option value="birthday" th:selected="${#strings.equals(param.type, 'birthday')}">Birthday</option>
<option value="book" th:selected="${#strings.equals(param.type, 'book')}">Book</option>
<option value="category" th:selected="${#strings.equals(param.type, 'category')}">Category</option>
<option value="sale" th:selected="${#strings.equals(param.type, 'sale')}">Sale</option>
</select>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
<div th:text="${param.type}">Type will be displayed here</div>
</div>
</form>
위처럼 #strings.equals를 사용하면 값을 가져온다

보이는 것처럼 search 버튼을 누르면 해당 검색옵션값과, 검색내용을 가져오는것을 확인 할 수 있다.