[모바일] 검색 - 자동완성

src/main/webapp/WEB-INF/views/mob/display/SearchLayerMob.html

@@ -25,11 +25,14 @@
 			<form id="searchMainForm" name="searchMainForm">
 				<input type="hidden" name="brandGroupNo" th:value="${brandGroupNo}"/>
 				<div class="sch_title">
-					<input type="text" class="form_control" name="keyword" placeholder="검색어를 입력하세요.">
-					<!-- <button class="btn_x">X</button> -->
+					<input type="text" class="form_control" name="keyword" placeholder="검색어를 입력하세요." onkeyup="fnOnkeyupKeyword(this);">
+					<button type="button" class="btn_x" id="deleteKeyword" style="display:none;">X</button>
 					<button type="button" class="btn_sch" id="btnSearchKeyword"><img src="/images/mo/ico_btn_search.png" alt=""></button>
 				</div>
 			</form>
+		</div>
+
+		<div class="inner" id="defaultArea">
 			<div class="filter-list">
 				<div class="f_left">
 					<h3>최근 검색어</h3>
@@ -162,7 +165,7 @@
 <!--		</div>-->
 		<!-- //2.통합검색 default_최근검색어 있음 -->
 		<!-- 3.지금 많이 보고 있어요 상품. -->
-		<div class="inner">
+		<div class="inner" id="popularArea">
 			<div class="now_view">
 				<div class="store_product">
 					<div class="allresult-tit">
@@ -275,176 +278,124 @@
 		<!-- //3.지금 많이 보고 있어요 상품. -->
 
 		<!-- 4.검색어 타이핑 -->
-		<div class="inner">
-			<div class="sch_title">
-				<input type="text" class="form_control" value="티비제이 제기장 스웨터" placeholder="NBA 겨울 클리어런스+봄 프리뷰!">
-				<button class="btn_x"><span>검색어 지우기</span></button>
-				<button class="btn_sch"><img src="/images/mo/ico_btn_search.png" alt=""></button>
-			</div>
+		<div class="inner" id="keyupArea">
+<!--			<div class="sch_title">-->
+<!--				<input type="text" class="form_control" value="티비제이 제기장 스웨터" placeholder="NBA 겨울 클리어런스+봄 프리뷰!">-->
+<!--				<button class="btn_x"><span>검색어 지우기</span></button>-->
+<!--				<button class="btn_sch"><img src="/images/mo/ico_btn_search.png" alt=""></button>-->
+<!--			</div>-->
 			<div class="filter-list store-list">
-				<div class="f_left">
-					<h3>티비제이 공식 스토어</h3>
-				</div>
-				<div class="f_right">
-					<a href="#none">바로가기</a>
-				</div>
+<!--				<div class="f_left">-->
+<!--					<h3>티비제이 공식 스토어</h3>-->
+<!--				</div>-->
+<!--				<div class="f_right">-->
+<!--					<a href="#none">바로가기</a>-->
+<!--				</div>-->
 			</div>
 			<div class="relative-list">
-				<ul>
-					<li>
-						<a href="#">
-							<p><span>티비제이</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p><span>티비제이</span> 기모청바지</p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p>TBJ 겨울 팬츠</p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p><span>제기장 스웨터</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p><span>티비제이</span> 드라마 연예인 스웨터</p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p>가을겨울 긴팔 롱 <span>스웨터</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p><span>스웨터</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p>롱 <span>스웨터</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p><span>티비제이</span> 여성 <span>스웨터</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p>가을겨울 긴팔 롱 <span>스웨터</span></p>
-						</a>
-					</li>
-				</ul>
-				<p class="nodata_txt">&lsquo;<span>스웨터 제기장</span>&rsquo; 에 맞는 상품을 찾지 못했습니다.<br>검색어를 변경해 보세요.</p>
+<!--				<ul>-->
+<!--					<li>-->
+<!--						<a href="#">-->
+<!--							<p><span>티비제이</span></p>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="#">-->
+<!--							<p><span>티비제이</span> 기모청바지</p>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="#">-->
+<!--							<p>TBJ 겨울 팬츠</p>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="#">-->
+<!--							<p><span>제기장 스웨터</span></p>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="#">-->
+<!--							<p><span>티비제이</span> 드라마 연예인 스웨터</p>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="#">-->
+<!--							<p>가을겨울 긴팔 롱 <span>스웨터</span></p>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="#">-->
+<!--							<p><span>스웨터</span></p>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="#">-->
+<!--							<p>롱 <span>스웨터</span></p>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="#">-->
+<!--							<p><span>티비제이</span> 여성 <span>스웨터</span></p>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="#">-->
+<!--							<p>가을겨울 긴팔 롱 <span>스웨터</span></p>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--				</ul>-->
+<!--				<p class="nodata_txt">&lsquo;<span>스웨터 제기장</span>&rsquo; 에 맞는 상품을 찾지 못했습니다.<br>검색어를 변경해 보세요.</p>-->
 			</div>
 		</div>
-		<div class="inner">
+		<div class="inner" id="keyupCateArea">
 			<div class="sch_category">
-				<h3>카테고리</h3>
-				<ul>
-					<li>
-						<a href="">
-							<span>여성</span>
-							<span>티셔츠/셔츠</span>
-							<span><em>긴팔셔츠</em></span>
-							<span>스트라이프 퍼프 스트라이프 퍼프</span>
-						</a>
-					</li>
-					<li>
-						<a href="">
-							<span>여성</span>
-							<span><em>니트/가디건/베스트</em></span>
-							<span>가디건</span>
-							<span>롱가디건</span>
-						</a>
-					</li>
-					<li>
-						<a href="">
-							<span><em>여성</em></span>
-							<span>자켓/점퍼/코트</span>
-							<span>코트</span>
-							<span>롱코트</span>
-						</a>
-					</li>
+<!--				<h3>카테고리</h3>-->
+<!--				<ul>-->
+<!--					<li>-->
+<!--						<a href="">-->
+<!--							<span>여성</span>-->
+<!--							<span>티셔츠/셔츠</span>-->
+<!--							<span><em>긴팔셔츠</em></span>-->
+<!--							<span>스트라이프 퍼프 스트라이프 퍼프</span>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="">-->
+<!--							<span>여성</span>-->
+<!--							<span><em>니트/가디건/베스트</em></span>-->
+<!--							<span>가디건</span>-->
+<!--							<span>롱가디건</span>-->
+<!--						</a>-->
+<!--					</li>-->
+<!--					<li>-->
+<!--						<a href="">-->
+<!--							<span><em>여성</em></span>-->
+<!--							<span>자켓/점퍼/코트</span>-->
+<!--							<span>코트</span>-->
+<!--							<span>롱코트</span>-->
+<!--						</a>-->
+<!--					</li>-->
 					<!-- <li>
                         <p>여성 > <span>니트/가디건/베스트</span> > 가디건 > 롱가디건</p>
                     </li>
                     <li>
                         <p><span>여성</span> > 자켓/점퍼/코트 > 코트 > 롱코트</p>
                     </li> -->
-				</ul>
+<!--				</ul>-->
 			</div>
 		</div>
 		<!-- //4.검색어 타이핑 -->
 
 		<!-- 3.검색결과 없을때 -->
-		<div class="inner">
-			<div class="sch_title">
-				<input type="text" class="form_control" placeholder="NBA 겨울 클리어런스+봄 프리뷰!">
-				<!-- <button class="btn_x">X</button> -->
-				<button class="btn_sch"><img src="/images/mo/ico_btn_search.png" alt=""></button>
-			</div>
+		<div class="inner" id="noDataArea">
+<!--			<div class="sch_title">-->
+<!--				<input type="text" class="form_control" placeholder="NBA 겨울 클리어런스+봄 프리뷰!">-->
+<!--				&lt;!&ndash; <button class="btn_x">X</button> &ndash;&gt;-->
+<!--				<button class="btn_sch"><img src="/images/mo/ico_btn_search.png" alt=""></button>-->
+<!--			</div>-->
 			<div class="relative-list nodata"> <!-- 검색결과 없을 시 nodata 클래스 추가 -->
-				<ul>
-					<li>
-						<a href="#">
-							<p><span>티비제이</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p><span>티비제이</span> 기모청바지</p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p>TBJ 겨울 팬츠</p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p><span>제기장 스웨터</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p><span>티비제이</span> 드라마 연예인 스웨터</p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p>가을겨울 긴팔 롱 <span>스웨터</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p><span>스웨터</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p>롱 <span>스웨터</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p><span>티비제이</span> 여성 <span>스웨터</span></p>
-						</a>
-					</li>
-					<li>
-						<a href="#">
-							<p>가을겨울 긴팔 롱 <span>스웨터</span></p>
-						</a>
-					</li>
-				</ul>
-				<p class="nodata_txt">&lsquo;<span>스웨터 제기장</span>&rsquo; 에 맞는 상품을 찾지 못했습니다.<br>검색어를 변경해 보세요.</p>
+				<p class="nodata_txt">&lsquo;<span id="noDataKeyword"></span>&rsquo; 에 맞는 상품을 찾지 못했습니다.<br>검색어를 변경해 보세요.</p>
 			</div>
 			<h3 class="hot-key">STYLE24에서 검색되고 있어요</h3>
 			<div class="related_keyword">
@@ -467,7 +418,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="inner">
+		<div class="inner" id="recommandArea">
 			<div class="recommand_product">
 				<div class="store_product">
 					<div class="swiper-container recommand_slide">
@@ -662,6 +613,127 @@
 		cfnGoToPage(actionUrl);
 	});
 
+	// 검색어 찾기
+	var fnGetAutoSearch = function (){
+		gagajf.ajaxFormSubmit("/display/search/auto/complete", document.searchMainForm, fnAutoCompleteList);
+	}
+
+	// 검색어 찾기 결과
+	var fnAutoCompleteList = function (result){
+		if(result.autoKeywords.length==0 && result.brand == null && result.cateList == null && result.goodsList ==null){
+			$("#keyupArea").hide();
+			$("#keyupCateArea").hide();
+			// $('.empty_box .nodata').find('#noDataKeyword').text("'"+$("#searchMainForm").find('input[name=keyword]').val()+"'");
+			$("#noDataArea").find('#noDataKeyword').text($("#searchMainForm").find('input[name=keyword]').val());
+			$("#noDataArea").show();
+			$("#recommandArea").show();
+		}else{
+			// 자동완성 키워드
+			if(result.autoKeywords != null && result.autoKeywords.length > 0){
+				$("#keyupArea").find(".relative-list").html('');
+				let tag = '';
+				tag += '<ul>\n';
+				$.each(result.autoKeywords, function (idx,item){
+					tag += '<li>\n';
+					tag += '	<a href="javascript:void(0);">\n';
+					tag += '		<p><span>'+result.autoKeywords[idx]+'</span></p>\n';
+					tag += '	</a>\n';
+					tag += '</li>\n';
+				});
+				tag += '</ul>\n';
+				$("#keyupArea").find(".relative-list").append(tag);
+			}
+
+			// 브랜드
+			if(result.brand != null){
+				$("#keyupArea").find(".store-list").html('');
+				let tag = '';
+				tag += '<div class="f_left">\n';
+				tag += '	<h3>'+result.brand.brandGroupNm+' 공식 스토어</h3>\n';
+				tag += '</div>\n';
+				tag += '<div class="f_right">\n';
+				tag += '	<a href="javascript:void(0);" onclick="cfnGoToBrandMain('+result.brand.brandGroupNo+');">바로가기</a>\n';
+				tag += '</div>\n';
+				$("#keyupArea").find(".store-list").append(tag);
+			}
+
+			if(result.cateList != null && result.cateList.length > 0){
+				$("#keyupCateArea").find(".sch_category").html('');
+				let tag = '';
+				tag += '<h3>카테고리</h3>\n';
+				tag += '<ul>\n';
+				$.each(result.cateList, function (idx, item){
+					tag +='<li>\n';
+					tag +='	<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'G032_101\' ';
+					if(item.cate1No != null){
+						tag += ', '+item.cate1No;
+					}
+					if(item.cate2No != null){
+						tag += ', '+item.cate2No;
+					}
+					if(item.cate3No != null){
+						tag += ', '+item.cate3No;
+					}
+					if(item.cate4No != null){
+						tag += ', '+item.cate4No;
+					}
+					if(item.cate5No != null){
+						tag += ', '+item.cate5No;
+					}
+					tag += ');">\n';
+					if(item.cate1Nm != null){
+						tag += '		<span>'+item.cate1Nm+'</span>\n';
+					}
+					if(item.cate2Nm != null){
+						tag += '		<span>'+item.cate2Nm+'</span>\n';
+					}
+					if(item.cate3Nm != null){
+						tag += '		<span>'+item.cate3Nm+'</span>\n';
+					}
+					if(item.cate4Nm != null){
+						tag += '		<span>'+item.cate4Nm+'</span>\n';
+					}
+					if(item.cate5Nm != null){
+						tag += '		<span>'+item.cate5Nm+'</span>\n';
+					}
+					tag +='	</a>\n';
+					tag +='</li>\n';
+				});
+				tag += '</ul>\n';
+
+				$("#keyupCateArea").find(".sch_category").append(tag);
+			}
+		}
+	}
+
+	// 검색어 입력
+	var fnOnkeyupKeyword = function (obj){
+		var searchValue = $(obj).val();
+		if(searchValue.length > 0){
+			$("#defaultArea").hide();
+			$("#popularArea").hide();
+			$("#keyupArea").show();
+			$("#keyupCateArea").show();
+			$("#deleteKeyword").show();
+			$("#noDataArea").hide();
+			$("#recommandArea").hide();
+			fnGetAutoSearch();
+		}else{
+			$("#defaultArea").show();
+			$("#popularArea").show();
+			$("#keyupArea").hide();
+			$("#keyupCateArea").hide();
+			$("#deleteKeyword").hide();
+			$("#noDataArea").hide();
+			$("#recommandArea").hide();
+		}
+	}
+
+	document.getElementById("deleteKeyword").onclick = function (){
+		$("#searchMainForm").find("input[name=keyword]").val('');
+		fnOnkeyupKeyword($("#searchMainForm").find("input[name=keyword]"));
+	}
+
 	$(document).ready( function() {
 		if (trendKeywordList.length > 0) {
 			$("#popularKeyArea").html('');
@@ -674,7 +746,14 @@
 				$("#popularKeyArea").append(tag);
 			});
 		}
+
+		$("#keyupArea").hide();
+		$("#keyupCateArea").hide();
+		$("#deleteKeyword").hide();
+		$("#noDataArea").hide();
+		$("#recommandArea").hide();
 	});
+
 	/*]]>*/
 </script>
 

src/main/webapp/WEB-INF/views/web/display/SearchLayerWeb.html

@@ -22,7 +22,7 @@
 			
 			<fieldset>
 				<legend>통합검색</legend>
-				<input type="text" name="keyword" value="" placeholder="검색어를 입력하세요." class="search_input" title="검색어 입력" maxlength="100" required="required" data-valid-name="검색어" onkeyup="fntestKey(this);"/>
+				<input type="text" name="keyword" value="" placeholder="검색어를 입력하세요." class="search_input" title="검색어 입력" maxlength="100" required="required" data-valid-name="검색어" onkeyup="fnOnkeyupKeyword(this);"/>
 				<button type="button" class="sch_btn" id="btnSearchKeyword"><i class="ico ico_search"><em>검색</em></i></button>
 			</fieldset>
 		</form>
@@ -384,12 +384,13 @@
 		//
 	});
 
+	// 검색어 찾기
 	var fnGetAutoSearch = function (){
 		gagajf.ajaxFormSubmit("/display/search/auto/complete", document.searchMainForm, fnAutoCompleteList);
 	}
 
-	let fnAutoCompleteList = function (result){
-		console.log(result);
+	// 검색어 찾기 결과
+	var fnAutoCompleteList = function (result){
 		if(result.autoKeywords.length==0 && result.brand == null && result.cateList == null && result.goodsList ==null){
 			$('.common_search .area_result .searching_box').hide();
 			$('.empty_box .nodata').find('#noDataKeyword').text("'"+$("#searchMainForm").find('input[name=keyword]').val()+"'");
@@ -492,7 +493,7 @@
 		}
 	}
 
-	var fntestKey = function (obj){
+	var fnOnkeyupKeyword = function (obj){
 		var searchValue = $(obj).val();
 		if(searchValue.length > 0) {
 			$('.common_search .area_result .default_box').hide();