close AJAX search results

Search에서 찾기 결과를 close button을 이용해 닫는 팁입니다.
오른 쪽 위의 >> ajax search를 통해서 뭐 하자는 것인지 확인 할 수 있습니다. 검색어를 입력해 보심 됩니다. 좋다고 계속 했다간,  스패머로 간주하고 Error를 큼지막하게 뱉어냅니다.

원문은 Movable Type AJAX Search에서 한글 설명은 무버블타입 AJAX search에서 확인 할 수 있습니다.

원문의 AJAX Search는 의 장점이랄 수 있는 페이지 갱신 없이 찾기 결과를 나타낼 수 있지만 닫기 버튼이 없어서 페이지가 길어 졌을 경우 약간의 번거로움이 있습니다. 원문 링크 중에 Borderleap에서 닫기 버튼을 이용하고 있기에 그곳 소스를 마구 헤집고 몇 가지 수정을 했습니다. 수정이라고 해봐야 IE에서는 close버튼이 제대로 동작하지 않는 부분과 검색버튼을 눌러야만 실행되는 것을 손 본 것뿐입니다. 여하튼 아래 팁의 저작권은 Movable Type AJAX SearchBorderleap에 있습니다.

0. 빨강색 굵은 글씨부분은 꼭 경로 설정을 해 줘야 하는 부분입니다.

1.
다음 코드를 ajax.tmpl로 만들어서 mt(설치된 곳)/search_templates/ 폴더 안에 넣어줍니다. (몇 부분 원문의 코드와 틀립니다. )

<div id="search-gray">
    <div id="search-label">
        <div id="search-label-text">
            <img src="http://당신홈페이지/img/검색결과.gif" width="101" height="11" alt="Search Results" />
        </div><!– id="search-label-text" –>
        <div id="search-label-close">
            <a href="javascript:closeSearch()" title="Close search box"><img src="http://당신홈페이지/img/닫기버튼.gif" width="11" height="11" alt="Close search box" /></a>
        </div><!– id="search-label-close" –>
    </div><!– id="search-label" –>
    <div id="search-results">
        <div class="search-results-string">
            Results for "<em><MTSearchString></em>"
        </div><!– class="search-results-string" –>
        <MTNoSearch>
        <div class="search-results-blank">
            You must search for something!
        </div><!– class="search-results-blank" –>
        </MTNoSearch>
        <MTNoSearchResults>
        <div class="search-results-none">
            No results found.
        </div><!– class="search-results-none" –>
        </MTNoSearchResults>
        <MTSearchResults>
            <div id="item-<$MTEntryID$>" class="search-results-item-color">
                <div class="searchbackgroundcolor" style="background-color: <$MTStripeColor target="searchbackgroundcolor" oddcolor="#FFEFE7" evencolor="#FEFDE2"$>; padding:3px 10px 2px 10px;">
                <a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
                  <div class="search-results-date">
                    <$MTEntryDate format="%Y. %m. %d"$>
                  </div><!– class="search-results-date" –>
               </div><!–searchbackgroundcolor end–>
            </div><!– id="item-<$MTEntryID$>"–>
        </MTSearchResults>
    </div><!– id="search-results" –>
</div><!– id="search-gray" –>
<div id="search-gray-footer">
</div><!– id="search-gray-footer" –>

위의 코드 중에 <$MTStripeColor$>는 검색결과의 홀수/짝수의 색을 틀리게 나타내 주는 플러그인 태그입니다. しましまプラグイン에서 다운 받은 후 압축을 풀고 mt(설치된 곳)/plugins/폴더에 넣어주면 됩니다. 이미지 부분은 당연히 텍스트로 대체해도 됩니다.

2.
mt(설치된 곳)에 보면 그러니깐 mt.cgi가 있는 곳과 같은 경로에 mt-config.cgi가 있습니다. 그 파일을 열고 맨 아래에 AltTemplate ajax ajax.tmpl 을 추가합니다. 설명하자면 (mt)/search_templates/ 밑의 ajax.tmpl 파일을, 내부적으로 ajax 라는 별명으로 부르겠다는 얘기입니다.

여기까지는 별 반 다를 게 없습니다. 계속 비슷비슷 합니다만 원문과의 차이를 쓰는 게 귀찮아서 그냥 다 쓰고 있습니다.

3.
인덱스 템플릿에서 mt-site.js 를 열고 맨 아래께에 다음 코드를 추가합니다.

/******* movabletype ajax search *********/
<!–
//USED FOR ALL AJAX FUNCTIONS
function getHTTPObject() {
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != ‘undefined’) {
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false;
    }
  }
  return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object

//–>

4.
인덱스 템플릿에 mt-search.js 라는 파일을 새롭게 만들고 다음 코드를 넣어줍니다. mt-site.js에 넣었더니 제 경우에는 충돌이 나서 파일을 따로 생성한 것입니다.

function handleSearchResponse() {
    var verTemp=navigator.appVersion.split("MSIE"); //used to do a fix for IE6 and below
    if (navigator.appName == "Microsoft Internet Explorer" && parseFloat(verTemp[1]) <= 6.0) {
        var doFix=true;
        var tempfix = document.getElementById("search-fix-for-ie").innerHTML;
    } //end of fix for IE6 and below
    document.getElementById("search-button").disabled=true;
    if (http.readyState == 4) {
        if (!doFix) {document.getElementById(‘searchstring’).value = ""; } //not cleared for IE because we need to rerun search results when a user clicks BACK
        if (doFix) {document.getElementById("search-fix-for-ie").innerHTML = ""; }
        document.getElementById(‘search-results-container’).innerHTML = http.responseText;
        document.getElementById("search-button").disabled=false;
        if (doFix) {document.getElementById("search-fix-for-ie").innerHTML = tempfix; }

    }
}

function searchMT() {
    var url = "http://당신홈페이지(mt가 설치된 곳까지 경로)/mt-search.cgi?"; // The server-side script
    var searchstring = document.getElementById("searchstring").value;
    var template = document.getElementById("template").value;
    var poststr = "search=" + encodeURI(searchstring) + "&Template=" + encodeURI(template);
    http.open("GET", url + poststr, true);
    http.onreadystatechange = handleSearchResponse;
    http.send(null);
}

function closeSearch() {
    var verTemp=navigator.appVersion.split("MSIE"); //used to do a fix for IE6 and below
    if (navigator.appName == "Microsoft Internet Explorer" && parseFloat(verTemp[1]) <= 6.0) {
        var doFix=true;
        var tempfix = document.getElementById("search-fix-for-ie").innerHTML;
    } //end of fix for IE6 and below
    if (doFix) {document.getElementById("search-fix-for-ie").innerHTML = ""; }
    document.getElementById(‘search-results-container’).innerHTML = "";
    document.getElementById(‘searchstring’).value = "";
    if (doFix) {document.getElementById("search-fix-for-ie").innerHTML = tempfix; }
}

위 코드에서 mt-search.cgi가 있는 곳까지 경로는 수정 잊지 마시고요. 끝에 ?도 잊으면 안 됩니다.

5.
거의 다 됐습니다. 여기까지 했으면 담배 한 대 피우며 쉬면됩니다. 꽤 기네요. ;;;

6.
사이드 바에서 서치 form을 찾아서 그러니깐 아래 부분을 찾아서

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
   <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
   <label for="search" accesskey="4">Search this blog:</label><br />
   <input id="search" name="search" size="20" />
   <input type="submit" value="Search" />
</form>

다음처럼 바꿔줍니다.

<div id="search">
<input id="searchstring" type="text" name="search" class="searchinputcss" value="Ajax Search" onclick="javascript:this.value=”;" />
<input id="search-button" class="buttoncss" type="submit" name="search-button" value="search" onclick="searchMT();" />
<input id="template" type="hidden" name="Template" value="ajax" />
</div><!– id="search" –>

7.
중요한 부분입니다. 검색결과가 출력 될 부분에 다음코드를 넣어 줍니다.

<table cellpadding="0" cellspacing="0"><tr><td><div id="search-results-container"></div><!– id="search-results-container"–></td></tr></table><div id="search-fix-for-ie"><!–id="ajax-fix-for-ie" start –>
……………….
사이드바의 다른 내용들(코멘트 트랙백 등등 원래 사이드 메뉴에 있던 게 있겠죠?)
……………….
</div><!–id="ajax-fix-for-ie" end–>

이 블로그처럼 사이드에서 검색결과가 출력 될 때는 사이드 처음과 끝에 <div id="search-fix-for-ie"></div><!–id="ajax-fix-for ie"–>으로 묶어 줘야합니다. 가령 무버블의 기본 템플릿에서는 <div id="beta-inner"><div id="search-fix-for-ie"> ……. </div></div><!–id="beta-inner" end–>이런식이 될 것입니다. 테이블을 미워한다고 해도 저 테이블이 없으면 IE에서는 닫기 버튼을 눌러도 붕 뜹니다. 내 홈페이지는 오직 firefox와 opera만을 위한 곳이다! 라는 분은 테이블을 빼도 됩니다.

8.
css 부분입니다. 요령껏 수정하면 되겠습니다. 이곳에서 사용하는 css입니다.

/***********************************************************/
/*****   Movabletype AJAX Search Start  *****/
/***********************************************************/
.buttoncss {
position: absolute;
/*bottom:1px;*/
float:right;
top:1px;
right:1px;
}

.searchinputcss {
width:200px;
border-bottom:1px solid #212018;
border-right:1px solid #212018;
border-left:1px solid #212018;
border-top:1px solid #212018;
color:#848284;
padding-left:20px;
background: url(/img/search_bg.gif) top left;
font-variant:small-caps;
font-size:1em;
}

#search {
float:left;
display:inline;
position:absolute;
top:105px;
left:548px; 
}

#search-gray {
position:relative;
margin-top:0px;
width:257px;
background-color:#fff;
padding:5px 0px 10px 0px;
border-top:1px solid #fff;
border-bottom:1px dotted #F76921;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
}

#search-label {
position:relative;
padding:10px 10px 10px 10px;
}

#search-label-text {
position:relative;
float:left;
padding-left:10px;
}

#search-label-close {
position:relative;
float:right;
padding-right:10px;
}

.search-results-string {
position:relative;
background-color:#FFFCCC;
margin:10px 10px 0px 10px;
padding:10px 10px 7px 10px;
font-size:12px;
text-decoration: none;
}

.search-results-blank,
.search-results-none {
margin:0px 10px 0px 10px;
padding:10px;
font-size:10px;
background-color:#FFFFFF;
}

.search-results-blank,
.search-results-none {
background-color:#FDEEE6;
}

.search-results-date {
font-size:10px;
margin-left:15px;
color:#666666;
}

.search-results-item-color {
margin:0px 10px 0px 10px;
font-size:9pt;
background-color:#FEFDE2;
}

#search-gray-footer {
position:relative;
padding-bottom:10px;
}

/*****   Movabletype AJAX Search End     *****/

잘 아시겠지만 그래도 한 번 더! 잊지 말아야 할 것은 두 개의 자바스크립트 파일 링크를 잊으면 안 됩니다.
이 ajax search가 나타나는 페이지의 <head></head>사이에

<script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-search.js"></script>

요것을 넣어야 합니다.

생각보다 긴 작업이네요. 그래도 8번까지의 여정에서 5번은 IE사용자든 FF사용자든 건너뛰어도 되니, 그걸로 위안 삼으심 되겠습니다. 이미 하셨으면 어쩔 수 없고요.

This entry was posted in Monologue and tagged . Bookmark the permalink.

Related Post

One Response to close AJAX search results

  1. 1

    MovableType AJAX Search

    AJAX Search는 검색 결과를 검색 페이지로 넘기지 않고 검색을 하는 페이지에서 바로 검색 결과를 출력 합니다. 사이트에서 원하는 결과가 없다면 페이지 이동을 할 필요가 없습니다. 무버블타입의 이 아작스 검색으로 CSS를 잘 다룬다면 borderleap 처…

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Attach a file Uploading File types: jpg, png, gif, zip, Max size: 1Mbytes, Max count: 3