[JavaScript] 공백이 검색되지 않도록 하기 (검색창 구현)

공백이 검색되지 않도록 하기 (검색창 구현)

개요

• 검색창(Search Bar) 기능을 구현할 때, 자바스크립트(JavaScript)를 이용하여 공백의 내용이 검색되지 않도록 설정할 수 있다.

 

방법

• 검색창의 내용이 비어있는지 확인하는 알고리즘이 들어있는 함수를 생성한다.
  • getElementById() 함수를 사용하여 검색창(searchbar)에 있는 값(value)을 가져온 후, trim() 함수를 이용하여 공백('')을 기준으로 잘라준다.
    • trim() 함수를 사용한 후의 값의 공백일 경우, 내용이 비어있다는 메시지와 함께 함수를 종료시켜준다.
    • 그렇지 않을 경우 검색 작업을 수행시키도록 한다.
• 전송(submit) 버튼의 onclick 속성에 함수를 넣어준다.

 

사용 예

HTML

<div id="searchBox">
    <input id="searchbar" type="text"/>
    <input type="button" onclick="filter()" class="submit"/>
</div>

 

JavaScript

function filter() {
    var content = document.getElementById("searchbar").value;
    if (content.trim() === '') {    /* 검색창의 내용이 비었을 경우 **/
        alert("It is empty!");
        return false;
    }
    else {
           /* 검색 작업 수행 */
    }
}