무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 상품관련

다찾다 검색어 자동완성 가상태그 설정 방법

글번호 : 995

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=995
다찾다 검색어 자동완성 기능이란? 상품 검색 시 단어 입력에 따라 일치하는 카테고리, 상품 키워드를 자동으로 제시해주는 기능입니다. << 기능 설정 >> 검색엔진 > 검색엔진 다찾다 > 다찾다 검색파인더 설정 > 검색어 자동완성 [사용] 설정 후 해당 기능을 사용하실 수 있습니다. *기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다.
[ 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)/-->
목록 1:1 문의