웹페이지하면 검색창 없는 곳이 드물정도로 검색창이 많은데
이 검색창 구현이 생각보다 엄청 쉽다는 것을 개발을 처음 접한 사람들은 모를 수 있다.
바로 구현해보자.
1. View단에서 텍스트를 입력할 수 있는 INPUT 태그를 만든다.
<input type="search" name="searchValue">1-1. 위 INPUT 태그에 사용자가 입력한 값을 컨트롤러에 보낼 수 있도록 Form으로 감싸준다.
<form action="/search" method="GET">
...
</form>
1-2. Submit 역할을 하는 버튼을 만들고 응용하고 싶다면 이를 검색이라는 텍스트 대신 아이콘으로 대신한다.
<!--요건 기본 검색-->
<button type="submit">검색</button>
<!--요건 아이콘으로 대신한 검색-->
<button type="submit">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
<!--위 아이콘을 사용하기 위해서는 아래의 fontawesome cdn 을 import 해줘야 한다.-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>
1-3. [ 응용 ] 아이콘을 누르지 않고 그냥 엔터를 쳐도 값이 전달되도록 한다.
<!-- 키보드를 딱 눌렀다 뗐을 때==onkeyup 작동하는 함수 enterkey 호출-->
<input onkeyup="enterkey()" type="search" name="searchValue"/>
<!-- 그 키보드가 keyCode==13, 즉, 엔터일 경우 반응하는 함수-->
function enterkey() {
if (window.event.keyCode == 13) {
<!-- 여기서 form에게 submit 하라고 리모컨 버튼 누르듯 조종하는 것-->
document.getElementById("폼 ID").submit();
}
}1-4 [최종] 응용 VER.코드
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>
</head>
<body>
<form id="searchForm" action="/search" method="GET">
<input onkeyup="enterkey()" type="search" name="searchValue"/>
<button type="submit">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
<script>
function enterkey() {
if (window.event.keyCode == 13) {
document.getElementById("searchForm").submit();
}
}
</script>
</body>2. 컨트롤러에서 해당 내용을 받는 내용은 다음글에!
'개발자 전향 프로젝트' 카테고리의 다른 글
| [Spring Boot] 페이징이 어렵다고? 이렇게만 하세요 (0) | 2022.09.24 |
|---|---|
| [Spring Boot] 세상 쉬운 검색창(검색 로직) 만들기 1-2 (백 로직) (0) | 2022.09.24 |
| [Spring] 모달 쉽게 띄우기 + 모달에 매개변수 값 전달하기 (타임리프) (2) | 2022.09.21 |
| [Spring] 객체지향 설계 5 원칙 SOLID란? feat.클린코드 (0) | 2022.09.21 |
| [jQuery] Datatable 로 쉽게 데이터 조회하는 테이블 만들기 (0) | 2022.09.15 |
