개발자 전향 프로젝트

[Spring Boot] 세상 쉬운 검색창(검색 로직) 만들기 1-1 (View)

샘오리 2022. 9. 24. 12:14
728x90
반응형

웹페이지하면 검색창 없는 곳이 드물정도로 검색창이 많은데 

이 검색창 구현이 생각보다 엄청 쉽다는 것을 개발을 처음 접한 사람들은 모를 수 있다.

 

바로 구현해보자.

 

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. 컨트롤러에서 해당 내용을 받는 내용은 다음글에!

728x90
반응형