title_img

카멜레온의 가상태그 사용방법 및 기능설정 TIP!

닫기
※ 아래의 내용으로는 이해하시기 어려우시면 1:1게시판을 통해 문의해주세요. go_qna
[상품관련] 다찾다 검색어 자동완성 가상태그 설정 방법 
다찾다 검색어 자동완성 기능이란?
상품 검색 시 단어 입력에 따라 일치하는 카테고리, 상품 키워드를 자동으로 제시해주는 기능입니다.

<< 기능 설정 >>
상품관리 > 검색엔진 다찾다 > 다찾다 설정 > 검색어 자동완성 [사용] 설정 후 해당 기능을 사용하실 수 있습니다.
*기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다.
 


[ PC버전 ]

<< 메인 > 검색페이지 >>
1. 작업위치
상단/측면/하단 디자인 > 상단 > 기본상단

2. 가상태그
<!--/input_search_word(search_auto_completion)/-->
<div class="search-auto-complete-list"></div>

3. 디자인 편집탭 - 베이직심플
- 빨간색 소스를 추가해주시면 됩니다.
            
            <div class="search">
                <!--/form_search/-->
                    <fieldset>
                        <legend>상품 검색 폼</legend>
                        <!--/input_search_word(search_auto_completion)/-->
                        <a href="<!--/link_search_button/-->">검색</a>
                    </fieldset>
                <!--/end_form/-->
            </div>
            <div class="search-auto-complete-list"></div>
        </div><!-- //searchArea -->
    </div><!-- //headerTop -->
 


4. 디자인 편집탭 - 모던심플
- 빨간색 소스를 추가해주시면 됩니다.
            
            <div id="hdSchFrm">
            <h2 class="blind">검색 폼</h2>
<!--/form_search/-->
                <fieldset>
                    <legend>검색 폼</legend>
                    <!--/input_search_word(search_auto_completion)/-->
                    <a href="<!--/link_search_button/-->"><img class="btn-sch" src="/images/d3/modern_simple/btn/btn_hd_sch.gif" alt="검색" title="검색" /></a>
                </fieldset>
<!--/end_form/-->
            <div class="search-auto-complete-list"></div>
        </div>
 


5. CSS탭 - 베이직심플

/* 다찾다 자동완성*/
.search-auto-complete-list { display:none; z-index:1; position:absolute; top:40px; left:0; border:1px solid #ddd; border-top:1px solid #000; line-height:14px; background:#fff; }
.search-auto-complete-list ul { width:202px; padding:4px 0 6px; border-bottom:1px solid #ddd; }
.search-auto-complete-list ul li { text-align:left; }
.search-auto-complete-list ul li.on { background:#f3f3f3; }
.search-auto-complete-list ul li a { display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'dotum'; font-size:12px; letter-spacing:-1px; }
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; }
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#999; font-size:11px; }


6. CSS탭 - 모던심플

/* 다찾다 자동완성*/
.search-auto-complete-list { display:none; z-index:1; position:absolute; top:21px; left:0; border:1px solid #ddd; line-height:14px; background:#fff; }
.search-auto-complete-list ul { width:169px; padding:4px 0 6px; border-bottom:1px solid #ddd; }
.search-auto-complete-list ul li { text-align:left; }
.search-auto-complete-list ul li a { display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'dotum'; font-size:12px; letter-spacing:-1px; }
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; }
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#999; font-size:11px; }
.search-auto-complete-list ul li.on { background:#f3f3f3; }




<< 검색결과 화면 >>
1. 작업위치
중앙디자인 > 상품관련 > 상품검색결과화면

2. 가상태그
<div class="tb-left tb-search">
<!--/input_keyword(search_auto_completion)/-->
<div class="search-auto-complete-list"></div>
</div>

3. 디자인 편집탭
- 빨간색 소스를 추가해주시면 됩니다.
* 기존소스 <div class="tb-left"> 대신 <div class="tb-left tb-search"> 추가


<th scope="row"><div class="tb-left">제품명·키워드</div></th>
   <td>
       <div class="tb-left tb-search">
       <!--/input_keyword(search_auto_completion)/-->
       <div class="search-auto-complete-list"></div>
      </div>
   </td>



4. CSS탭 - 베이직심플

/* 다찾다 자동완성*/
.tb-search { position:relative; }
.tb-search .search-auto-complete-list { display:none; z-index:1; position:absolute; top:31px; left:10px; border:1px solid #ddd; border-top:1px solid #ddd; line-height:14px; background:#fff; }
.tb-search .search-auto-complete-list ul { width:222px; padding:4px 0 6px; border-bottom:1px solid #ddd; }
.tb-search .search-auto-complete-list ul li { text-align:left; }
.tb-search .search-auto-complete-list ul li.on { background:#f3f3f3; }
.tb-search .search-auto-complete-list ul li a { display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'dotum'; font-size:12px; letter-spacing:-1px; }
.tb-search .search-auto-complete-list ul li a strong { color:#ab3e41; }
.tb-search .search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.tb-search .search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; }
.tb-search .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#999; font-size:11px; }


5. CSS탭 - 모던심플

/* 다찾다 자동완성*/
.tb-search { position:relative; }
.tb-search .search-auto-complete-list { display:none; z-index:1; position:absolute; top:20px; left:-55px; border:1px solid #ddd; line-height:14px; background:#fff; }
.tb-search .search-auto-complete-list ul { width:169px; padding:4px 0 6px; border-bottom:1px solid #ddd; }
.tb-search .search-auto-complete-list ul li { text-align:left; }
.tb-search .search-auto-complete-list ul li a { display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'dotum'; font-size:12px; letter-spacing:-1px; }
.tb-search .search-auto-complete-list ul li a strong { color:#ab3e41; }
.tb-search .search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.tb-search .search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; }
.tb-search .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#999; font-size:11px; }






[ 모바일 4.0 ]

<< 메인 > 검색페이지 >>
1. 작업위치
상단/하단 디자인 > 상단 > 기본상단

2. 가상태그
<!--/input_search_word(search_auto_completion)/-->
<div class="search-auto-complete-list"></div>

3. 디자인 편집탭
- 빨간색 소스를 추가해주시면 됩니다. 


    <div class="search">
        <div class="searchBox">
            <!--/form_search/-->
            <fieldset>
            <legend>검색 폼</legend>
            <!--/input_search_word(search_auto_completion)/-->
            </fieldset>
            <!--/end_form/-->
            <div class="search-auto-complete-list"></div>
        </div>
        <a href="<!--/link_search_button/-->" class="btn_search"><span class="fa fa-search fa-2x"></span></a>
    </div>
 


4. CSS탭 - 세로형

#header .search .searchBox { position:relative; width:100%; }
/* 다찾다 자동완성*/
.search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:50%; width:90%; margin-left:-45%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.search-auto-complete-list ul { width:100%; padding:8px 0 10px; border-bottom:1px solid #ddd; }
.search-auto-complete-list ul li { text-align:left; }
.search-auto-complete-list ul li a { display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; }
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }



5. CSS탭 - 가로형

/* 다찾다 자동완성*/
.search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
.search-auto-complete-list ul li { text-align:center; margin: 3px; }
.search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.search-auto-complete-list ul li a:hover span {}
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }



<< 검색결과 화면 >>
1. 작업위치
중앙디자인 > 상품관련 > 상품검색결과화면

2. 가상태그
<div class="tb-left tb-search">
<!--/input_keyword(search_auto_completion)/-->
<div class="search-auto-complete-list"></div>
</div>

3. 디자인 편집탭
- 빨간색 소스를 추가해주시면 됩니다.


            <main id="search">
            <div class="form-wrap">
            <!--/form_search/-->
                <div class="searchForm">
                    <div class="tb-left tb-search">
                  <!--/input_keyword(search_auto_completion)/-->
                       <div class="search-auto-complete-list"></div>
                      </div>                       
              <p class="searchPrice"><!--/input_price_min(input-price)/--> 원 ~ <!--/input_price_max(input-price)/--> 원</p>
                </div>
  


4. CSS탭 - 세로형

#search .form-wrap .searchForm { position:relative; width:80%; } 
/* 다찾다 자동완성*/
#search .form-wrap .searchForm .search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:0; width:90%; margin-left: 0; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
#search .form-wrap .searchForm .search-auto-complete-list ul { width:100%; padding:8px 0 10px; border-bottom:1px solid #ddd; }
#search .form-wrap .searchForm .search-auto-complete-list ul li { text-align:left; }
#search .form-wrap .searchForm .search-auto-complete-list ul li a { display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
#search .form-wrap .searchForm .search-auto-complete-list ul li a strong { color:#ab3e41; }
#search .form-wrap .searchForm .search-auto-complete-list ul li a:hover { background:#f2f2f2; }
#search .form-wrap .searchForm .search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; }
#search .form-wrap .searchForm .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }



5. CSS탭 - 가로형

#search .form-wrap .searchButton {height: 36px; line-height: 42px;}
/* 다찾다 자동완성*/
#search .form-wrap .searchForm .search-auto-complete-list { display:none; z-index:1; position:absolute; top:54px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
#search .form-wrap .searchForm .search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
#search .form-wrap .searchForm .search-auto-complete-list ul li { text-align:center; margin: 3px; }
#search .form-wrap .searchForm .search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
#search .form-wrap .searchForm .search-auto-complete-list ul li a strong { color:#ab3e41; }
#search .form-wrap .searchForm .search-auto-complete-list ul li a:hover { background:#f2f2f2; }
#search .form-wrap .searchForm .search-auto-complete-list ul li a:hover span {}
#search .form-wrap .searchForm .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }








[ 모바일 2.0 ]

<< 검색결과 화면 >>
1. 작업위치
중앙디자인 > 상품관련 > 상품검색결과화면

2. 가상태그
<!--/input_keyword(search_auto_completion)/-->
<div class="search-auto-complete-list"></div>

3. 디자인 편집탭
- 빨간색 소스를 추가해주시면 됩니다.


        <div id="search" class="wrapper">
        <div class="form-wrap">
            <!--/form_search/-->
                <!--/input_keyword(search_auto_completion)/-->
                 <a href="<!--/link_search/-->" class="btn-type-06"><span>검색</span></a>
                       <!--/end_form/-->
        </div>
        <div class="results">
            <div class="tool-wrap wrapper">
                <!--/select_category/-->
                <!--/select_sort/-->
            </div>
 <div class="search-auto-complete-list"></div>



4. CSS탭 - 세로형

/* 다찾다 자동완성*/
.search-auto-complete-list { display:none; z-index:1; position:absolute; top:45px; right:16%; width:82.6%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.search-auto-complete-list ul { width:100%; padding:8px 0 10px; border-bottom:1px solid #ddd; list-style:none; }
.search-auto-complete-list ul li { text-align:left; }
.search-auto-complete-list ul li a { display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; }
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }



5. CSS탭 - 가로형

/* 다찾다 자동완성*/
.search-auto-complete-list { display:none; z-index:1; position:absolute; top:50px; right:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.search-auto-complete-list ul { padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; list-style:none; display: flex; flex-wrap: wrap; }
.search-auto-complete-list ul li { text-align:left; margin: 3px; }
.search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }





[ 자동완성 카테고리 노출 설정 ]
아래 가상태그를 넣어주시면 카테고리 0~3개까지 제어하여 사용하실 수 있습니다.
빨간색 소스 대신 아래 가상태그 중 원하는 가상태그로 넣어주시기 바랍니다.

<< 메인 > 검색 >>
[작업위치] 상단 > 기본상단 
<!--/input_search_word(search_auto_completion)/-->

<< 검색결과 화면 >>
[작업위치] 중앙디자인 > 상품관련 > 상품검색결과 화면 
<!--/input_keyword(search_auto_completion)/-->

 << 가상태그 >> 
- 빨간색 소스를 추가해주시면 됩니다.
 1. 카테고리 0개 노출
<!--/input_search_word(search_auto_completion enabled_category_count_0)/-->
 2. 카테고리 1개 노출
<!--/input_search_word(search_auto_completion enabled_category_count_1)/-->
 3. 카테고리 2개 노출
<!--/input_search_word(search_auto_completion enabled_category_count_2)/-->
 4. 카테고리 3개 노출
<!--/input_search_word(search_auto_completion enabled_category_count_3)/-->

이전 이전 : 스마트 정기배송 작업방법
다음 다음 : 간편,SNS 회원가입 페이지에서 평생회원 노출방법
목록 닫기