[자바스크립트] 검색창 달기

티스토리의 첫페이지 설정을 도와주는 태터데스크를 통해 검색창을 달수있습니다.

처음에는 자바 스크립트 없이 <form> 태그를 사용하여 쿼리로 던지려 했으나 

"http://cybertramp.net/search/?search="검색 값" 이런식으로 넘어가서 작동을 하지않아 포기했다가 왠지 될것같은 기분이 들어서 다시 만졌습니다.

티스토리는 검색 결과를 "http://cybertramp.net/search/[검색 값]" 과 같이 넘기는데 어떻게 하면 될까 계속 고민하다가

 자바스크립트를 사용하여 해당 검색 된 페이지로 이동 할수있게 설정 하였습니다.

검색창을 만드려면 검색을 하는 창과 검색 액션을 위한 버튼이 필요합니다.

또한 액션은 2가지가 가능한데.. 엔터키를 눌러 검색하는 방식과 버튼을 눌러 검색하는 방식이 있습니다.

CSS는 제타위키를 참고 하였습니다.

저는 CSS 색상을 수정했고, HTML과 JAVASCRIPT 만 구현을 했습니다.

HTML은 input 속성 2가지(검색창, 검색버튼)을 사용했습니다.

HTML에서 자바스크립트를 실행시켜줘야하는데 이 부분은

onclick="enterSearch()"

onkeydown="myFunction()" 

을 사용했습니다.

자바스크립트에서는

키 코드 13번은 ASCII 코드표에 따라 ENTER

document.getElementById("text").value 는 input 속성 type=text의 id가 text인데 그 요소의 값을 가져오는 것입니다.

즉, 검색창의 입력된 값을 가져오는 것입니다.

window.location.href는 현재창에서 해당 링크로 이동하는 것입니다. 뒤에 검색 값을 붙여주기위해 +x를 사용하여 문자열을 합쳐서 값을 넘겨줍니다.

구현코드

<!-- 180507 검색창 구현 -->
<!-- CSS -->
<style>
.green_window {
    display: inline-block;
    width: 366px; height: 34px;
    border: 3px solid #200400;
    background: white;
}
.input_text {
    width: 348px; height: 21px;
    margin: 6px 0 0 9px;
    border: 0;
    line-height: 21px;
    font-weight: bold;
    font-size: 16px;
    outline: none;
}
.sch_smit {
    width: 54px; height: 40px;
    margin: 0; border: 0;
    vertical-align: top;
    background: #200400;
    color: white;
    font-weight: bold;
    border-radius: 1px;
    cursor: pointer;
}
.sch_smit:hover {
    background: #56C82C;
}
</style>
<!-- HTML -->
<span class='green_window'>
<input id=text type="text" class='input_text' name="search" onkeydown="enterSearch()"/></span>
<input type="button" class='sch_smit' value="검색" onclick="myFunction()"/>
<!-- JAVASCRIPT -->
<script type="text/javascript">
function enterSearch() {
    if(event.keyCode == 13){
        myFunction();  // 실행할 이벤트
    }
}
function myFunction() {
    var x = document.getElementById("text").value;
    window.location.href = "http://cybertramp.net/search/"+x;
}
</script>
 

삽질 시간 : 4시간