JavaScript Enter 누를 때 검색 기능 로직 - 활용 소스 코드 제공

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 키 이벤트를 감지하여 검색을 실행할 수 있습니다. 이를 활용하여 웹 애플리케이션에서 사용자 경험을 개선하고 편리한 검색 기능을 제공하세요.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 배열 메소드 find() 쉽게 배우기 - 예시 코드 제공

 

JavaScript 배열 메소드 filter() 쉽게 배우기 - 예시 코드 제공