[Javascript] Input 값 엔터로 넘기기

개인과제를 진행하던 중 선택 요구사항에 엔터입력시 검색하는 기능을 구현한 것을 기억하기 위해 이 글을 작성한다.

<div class="form-wrapper">
				<form
					id="search-form"
					class="search-form"
					onsubmit="return false"
					action=""
				>
					<input
						id="title"
						class="movie-input"
						type="text"
						required
					/>
					<button id="search" class="search-btn" type="button">
						검색
					</button>
				</form>
			</div>
</div>

간단한 폼이 있다고 생각하자.
우선 input이 enter로 submit 되는것을 방지하기위해 form onsubmit 속성에 return false를 넣어주어야 한다.

const movieInput = document.querySelector('input');
const searchWhenEnteredPressed = movieInput.addEventListener('keyup', (e) => {
	if (e.key === 'Enter') {
		getFilteredMovie(e.currentTarget.value);
	}
});

const getFilteredMovie = async (movieName) => {
	const data = await getData();
	const result = data.results;
	let inputValue = movieInput.value;
    const regx = new RegExp(inputValue, 'gi'); //find patterns for matching input values

	if (movieName) {
		inputValue = movieName;
	}

	main.innerHTML = '';

	result.forEach((data) => {
		if (data.title.match(regx)) {
			makeMovieCard(data);
		}
	});

	movieInput.focus();
};

그 다음 자바스크립트에서 addEventListener를 통해 keyup 이벤트가 발생했을 경우 callback 함수를 작성해준다.

e.key를 사용한 이유로는 e.keyCode가 outdated 됐기때문에 바뀐 e.key를 사용하였다.

keyup 이벤트는 키를 떼었을 때 발생한다.

위 코드를 실행해보면, 화면이 전환되지 않고 검색 결과를 div(main)에 보여준다.