JavaScript Enter 누를 때 검색 기능 로직 - 활용 소스 코드 제공
웹 애플리케이션을 개발하다보면, 사용자가 검색 필드에 검색어를 입력하고 Enter 키를 누르면 검색이 실행되도록 하는 것이 흔한 요구사항 중 하나입니다. 이 글에서는 JavaScript를 사용하여 Enter 키를 누를 때 검색을 가능하도록 하는 방법을 알아보겠습니다.
이벤트 리스터 추가하기
검색 필드에서 Enter 키를 누르면 검색을 실행하려면 이벤트 리스너를 추가해야 합니다. 보통 keyup 이벤트를 사용합니다. 이벤트 리스너는 검색 필드에 추가됩니다.
const searchField = document.getElementById('searchField');
searchField.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
// Enter 키를 눌렀을 때 검색 실행
performSearch(searchField.value);
}
});
위 코드에서 searchField는 HTML에서 검색 필드를 식별하는 방법에 따라 가져온 DOM 요소입니다. keyup 이벤트를 감지하여 이벤트 콜백 함수에서 Enter 키를 누르면 performSearch() 함수를 호출합니다.
검색 실행 함수 만들기
검색을 실행할 때 호출되는 함수를 만들어야 합니다. 이 함수는 검색어를 인수로 받아 실제 검색 작업을 수행하게 됩니다.
function performSearch(query) {
// 검색어를 사용하여 검색 실행
console.log('검색어:', query);
// 여기에 검색 로직 추가
}
위 코드에서 performSearch() 함수는 검색어를 인수로 받아 검색 로직을 수행하는 곳입니다. 여기에서 실제 검색 동작을 추가해야 합니다.
예시 코드
이제 위에서 설명한 개념을 사용하여 간단한 검색 필드와 검색 실행 함수를 만들어보겠습니다.
<input type="text" id="searchField" placeholder="검색어를 입력하세요">
<script>
const searchField = document.getElementById('searchField');
searchField.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
performSearch(searchField.value);
}
});
function performSearch(query) {
console.log('검색어:', query);
// 여기에 실제 검색 로직을 추가하세요
}
</script>
위 HTML과 JavaScript 코드를 사용하면 사용자가 검색 필드에 검색어를 입력하고 Enter 키를 누를 때 검색어가 콘솔에 표시됩니다. 실제 검색 로직은 performSearch() 함수에 추가해야 합니다.
끝으로
JavaScript를 사용하여 Enter 키를 누를 때 검색이 가능하도록 만들 수 있습니다. 위에서 설명한 방법을 사용하면 검색 필드에 이벤트 리스너를 추가하고, Enter 키 이벤트를 감지하여 검색을 실행할 수 있습니다. 이를 활용하여 웹 애플리케이션에서 사용자 경험을 개선하고 편리한 검색 기능을 제공하세요.
▼ 아래 글도 읽어보세요! ▼
'Programming & Platform > JavaScript' 카테고리의 다른 글
JavaScript로 이미지 위에 마우스 커서를 손가락 모양으로 바꾸기 (0) | 2023.12.11 |
---|---|
JavaScript 페이지 새로고침 후 검색 입력란에 커서 자동 위치시키기 (0) | 2023.12.10 |
JavaScript yarn SyntaxError: missing ) after argument list 해결 (1) | 2023.12.07 |
JavaScript 배열 메소드 find() 쉽게 배우기 - 예시 코드 제공 (0) | 2023.12.03 |
JavaScript 배열 메소드 reduce() 쉽게 배우기 - 예시 코드 제공 (1) | 2023.12.02 |