티스토리 블로그에 구글 맞춤검색 달기 (DIV의 display 이용)

들어가며

기존에 포스팅 하였던 티스토리 블로그에 구글 맞춤검색 달기와 CSE(맞춤 검색 엔진)의 생성 방법까지는 같으므로, 이 포스팅에서는 CSE 의 생성 과정은 생략하도록 하겠습니다.
여기서 다룰 내용은 검색창에서 검색 할 키워드 입력 시, DIV 의 스타일 중 display 의 항목을 변경하여 검색 결과를 출력해 주는 방식입니다.

특징

페이지의 이동 없이, 현재 보고 있는 페이지 내에서 처리가 가능합니다.

주의

※ 이미 iframe 방식으로 블로그에 CSE를 적용하신 경우, 원래대로 되돌리신 후 이 방법을 적용해 주시기 바랍니다. 그렇지 않을 경우 정상적으로 작동하지 않을 수도 있습니다.
※ 자바스크립트가 사용 가능해야 합니다.

CSE 스크립트

다음의 코드를 적당한 부분(저는 Head에 넣었습니다.)에 넣어주도록 합니다.

<!-- Google CSE -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    var customSearchControl = null;
    function executeQuery() {
        var textNode = document.getElementById('검색창의 id');
        if (textNode.value == '') {
            customSearchControl.clearAllResults();
            document.getElementById('cse').style.display = "none";
        } else {
            customSearchControl.execute(textNode.value);
            document.getElementById('cse').style.display = "block";
        }
    }
    google.load('search', '1', {language : 'ko'});
    google.setOnLoadCallback(function() {
        customSearchControl = new google.search.CustomSearchControl('검색엔진 고유 ID');
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var options = new google.search.DrawOptions();
        options.enableSearchResultsOnly();
        customSearchControl.draw('cse', options);
    }, true);
</script>

굵은 글자로 쓰여진 부분을 반드시 수정해 주시기 바랍니다.

다음의 코드를 검색 결과가 보여질 위치에 끼워 넣도록 합니다.

<!-- 맞춤 검색 결과가 표시 될 부분 (CSE Start) -->
<div id="cse" style="width:100%; display:none;"></div> <!-- CSE End -->

마지막으로 기존 검색창이 달려 있는 부분을 주석처리 한 후, 다음과 같이 변경해 주시기 바랍니다.

<!-- 검색창 부분 -->
<input id="searchText" class="searchText" type="text" name="" value="" onFocus="this.value=''" onkeypress="if (event.keyCode == 13) { executeQuery() }"/>

iframe 방식과 다르게 은 신경쓰실 필요 없습니다.

제 블로그의 경우 헤더 아래 부분에 위의 코드를 넣고, 본문이 표시되는 부분 전체를 다른 id(cBody)를 가진 div 태그로 묶어, 검색할 키워드 입력 후 엔터를 누르면 두 div 의 display 옵션이 변경되게끔 하였습니다.

<!-- Google CSE -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    var customSearchControl = null;
    function executeQuery() {
        var textNode = document.getElementById('검색창의 id');
            if (textNode.value == '') {
                customSearchControl.clearAllResults();
                document.getElementById('cse').style.display = "none";
                // 추가한 부분
                document.getElementById('cBody').style.display = "block";
            } else {
                customSearchControl.execute(textNode.value);
                document.getElementById('cse').style.display = "block";
                // 추가한 부분
                document.getElementById('cBody').style.display = "none";
            }
...

<!-- ==Header Start========================== -->
<div id="header">
...
블로그 상단의 메뉴들이 이 곳에 있습니다.
...
</div> <!-- Header End -->

<!-- ==CSE Start========================== -->
<div id="cse" style="width:100%; display:none;"></div> <!-- CSE End -->

<!-- ==Content Body Start========================== -->
<div id="cBody">
...
엔트리, 태그구름 등등...
...
</div>

<div id="footer">
...

이건 그냥 참고만 해 주세요 ^^;