검색 - 자동완성

src/main/java/com/style24/front/biz/web/TsfDisplayController.java

@@ -10,6 +10,7 @@ import java.util.HashMap;
 import javax.servlet.http.HttpServletResponse;
 
 import com.style24.persistence.domain.searchengine.PlanningResponse;
+import com.style24.persistence.domain.searchengine.AutoCompleteResponse;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.mobile.device.Device;
@@ -1179,4 +1180,38 @@ public class TsfDisplayController extends TsfBaseController {
 		return mav;
 	}
 
+	/**
+	 * 검색어 자동완성
+	 * @param params - 검색엔진 정보
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 6. 15
+	 */
+	@PostMapping("/search/auto/complete")
+	@ResponseBody
+	public GagaMap getSearchAutoCompleteList(@RequestBody SearchEngine params) {
+		GagaMap result = new GagaMap();
+
+		params.setFrontGb(TsfSession.getFrontGb());
+		params.setCustGb(TsfSession.getCustGb());
+
+		String[] autoKeywords;
+		BrandGroup brand;
+		Collection<Cate4Srch> cateList = new ArrayList<Cate4Srch>();
+		Collection<SearchEngine> goodsList = new ArrayList<SearchEngine>();
+
+		AutoCompleteResponse autoComplete = diquest.getAutoComplete(params.getKeyword());
+		autoKeywords = autoComplete.getAutoKeywords();
+		brand = autoComplete.getBrand();
+		cateList = autoComplete.getCateList();
+		goodsList = autoComplete.getGoodsList();
+
+		result.set("autoKeywords", autoKeywords);
+		result.set("brand", brand);
+		result.set("cateList", cateList);
+		result.set("goodsList", goodsList);
+
+		return result;
+	}
+
 }

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

@@ -26,7 +26,7 @@
 <!--				<th:block th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">-->
 					<th:block th:if="${contentsLoc=='001'}">
 						<!-- 1. 비주얼 슬라이드 -->
-						<div class="inner wide">
+						<div class="inner wide" th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">
 							<div class="main_visual">
 								<div class="swiper-container post-visual">
 									<div class="swiper-wrapper">
@@ -143,11 +143,11 @@
 						<div class="inner">
 							<div class="main_it">
 								<div class="titWrap">
-									<th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
-										<a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
-											<h2 th:text="${contentsTitle}"></h2>
-										</a>
-									</th:block>
+<!--								<th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">-->
+									<a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_BEST_MAIN);">
+										<h2 th:text="${contentsTitle}"></h2>
+									</a>
+<!--								</th:block>-->
 								</div>
 								<div class="inner_head">
 									<ul class="it_nav">
@@ -240,7 +240,7 @@
 					<th:block th:if="${contentsLoc=='006'}">
 						<!-- 6. 타임딜 : 슬라이드 -->
 						<th:block th:each="socialData, socialStat : ${mainData.socialInfo}">
-						<div class="inner bg_dark" th:if="${socialData.socialGoodsList != null}">
+						<div class="inner bg_dark" th:if="${socialData.socialGoodsList != null and !socialData.socialGoodsList.empty}">
 							<div class="main_deal">
 								<div class="titWrap">
 									<a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_SOCIAL_MAIN);">
@@ -754,8 +754,10 @@
 		/*<![CDATA[*/
 		var mainLayoutList = [[${mainLayoutList}]];
 		// console.log(mainLayoutList);
-
-		var targetTime = $("#socailForm").find("input[name=targetTime]").val().toDate("YYYYMMDD");
+		var targetTime = '';
+		if(!gagajf.isNull($("#socailForm").find("input[name=targetTime]").val())){
+			targetTime = $("#socailForm").find("input[name=targetTime]").val().toDate("YYYYMMDD");
+		}
 		if(targetTime != null && targetTime != ''){
 			/* 핫딜 countDown */
 			var endTime = new Date(targetTime); // 남은시간 지정

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

@@ -26,7 +26,7 @@
 <!--			<th:block th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">-->
 				<th:block th:if="${contentsLoc=='001'}">
 					<!-- 1. 비주얼 슬라이드 -->
-					<div class="content wide main_visual">
+					<div class="content wide main_visual" th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
 						<div class="cont_head dpnone">
 							<p class="t_c">비주얼 슬라이드</p>
 						</div>
@@ -152,9 +152,9 @@
 							<p class="displayH" id="id004">
 								<input type="hidden" name="title" th:value="${mainLayoutData.contentsTitle}">
 							</p>
-							<th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
-								<a href="javascript:void(0);" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);"><span>전체보기</span></a>
-							</th:block>
+<!--						<th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">-->
+							<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_BEST_MAIN);"><span>전체보기</span></a>
+<!--						</th:block>-->
 						</div>
 						<div class="cont_body">
 							<div class="it_nav">
@@ -240,7 +240,7 @@
 				<!-- 6. 타임딜 : 슬라이드 -->
 				<th:block th:if="${contentsLoc=='006'}">
 					<th:block th:each="socialData, socialStat : ${mainLayoutData.socialInfo}">
-					<div class="content wide main_deal" th:if="${socialData.socialGoodsList != null}">
+					<div class="content wide main_deal" th:if="${socialData.socialGoodsList != null and !socialData.socialGoodsList.empty}">
 						<div class="cont_head">
 							<p class="displayH" id="id006">
 								<input type="hidden" name="title" th:value="${mainLayoutData.contentsTitle}">
@@ -271,55 +271,59 @@
 							<script>
 								/* 핫딜 countDown */
 								// var target_date = new Date().getTime() + (1000*3600*8); // set the countdown date
-								var target_date = $("#socailForm").find("input[name=targetTime]").val().toDate("YYYYMMDD");
-								var days, hours, minutes, seconds; // variables for time units
+								var target_date = '';
+								if(!gagajf.isNull($("#socailForm").find("input[name=targetTime]").val())){
+									target_date = $("#socailForm").find("input[name=targetTime]").val().toDate("YYYYMMDD");
+								}
+								if(target_date != null && target_date != ''){
+									var days, hours, minutes, seconds; // variables for time units
 
-								var countdown = document.getElementById("tiles"); // get tag element
+									var countdown = document.getElementById("tiles"); // get tag element
 
-								getCountdown();
+									getCountdown();
 
-								var timerStop = setInterval(function () { getCountdown(); }, 1000);
+									var timerStop = setInterval(function () { getCountdown(); }, 1000);
 
-								var fixDate = new Date().getTime();
-								var fixTarget = (target_date - fixDate) / 1000;
-								var width = (86400-fixTarget)*100/86400;
+									var fixDate = new Date().getTime();
+									var fixTarget = (target_date - fixDate) / 1000;
+									var width = (86400-fixTarget)*100/86400;
 
-								function getCountdown(){
+									function getCountdown(){
 
-									// find the amount of "seconds" between now and target
-									var current_date = new Date().getTime();
-									var seconds_left = (target_date - current_date) / 1000;
+										// find the amount of "seconds" between now and target
+										var current_date = new Date().getTime();
+										var seconds_left = (target_date - current_date) / 1000;
 
-									seconds_left = seconds_left % 86400;
+										seconds_left = seconds_left % 86400;
 
-									hours = pad( parseInt(seconds_left / 3600) );
-									seconds_left = seconds_left % 3600;
+										hours = pad( parseInt(seconds_left / 3600) );
+										seconds_left = seconds_left % 3600;
 
-									minutes = pad( parseInt(seconds_left / 60) );
-									seconds = pad( parseInt( seconds_left % 60 ) );
+										minutes = pad( parseInt(seconds_left / 60) );
+										seconds = pad( parseInt( seconds_left % 60 ) );
 
-									// format countdown string + set tag value
-									countdown.innerHTML = "<span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
+										// format countdown string + set tag value
+										countdown.innerHTML = "<span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
 
-									var elem = document.getElementById("barCurrent");
-									function progressMove(){
-										width += (100-width)/fixTarget;
-										elem.style.width = width + "%";
-									}
-									progressMove();
+										var elem = document.getElementById("barCurrent");
+										function progressMove(){
+											width += (100-width)/fixTarget;
+											elem.style.width = width + "%";
+										}
+										progressMove();
 
-									if(seconds_left < 1){
-										clearInterval(timerStop);
-										elem.style.width = "100%";
-									}
+										if(seconds_left < 1){
+											clearInterval(timerStop);
+											elem.style.width = "100%";
+										}
 
-								}
+									}
 
-								function pad(n) {
-									return (n < 10 ? '0' : '') + n;
+									function pad(n) {
+										return (n < 10 ? '0' : '') + n;
+									}
 								}
 								/* countDown */
-
 							</script>
 						</div>
 						<div class="cont_body">

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="검색어"/>
+				<input type="text" name="keyword" value="" placeholder="검색어를 입력하세요." class="search_input" title="검색어 입력" maxlength="100" required="required" data-valid-name="검색어" onkeyup="fntestKey(this);"/>
 				<button type="button" class="sch_btn" id="btnSearchKeyword"><i class="ico ico_search"><em>검색</em></i></button>
 			</fieldset>
 		</form>
@@ -126,45 +126,45 @@
 		<!-- 검색결과 입력 후 -->
 		<div class="searching_box" style="display:none;">
 			<div class="autokeyword_blk">
-				<ul>
-					<li><a href=""><em>가</em>을컬리수</a></li>
-					<li><a href=""><em>가</em>드상하</a></li>
-					<li><a href=""><em>가</em>죽자켓</a></li>
-					<li><a href=""><em>가</em>죽밸트</a></li>
-					<li><a href=""><em>가</em>운</a></li>
-					<li><a href=""><em>가</em>을</a></li>
-					<li><a href=""><em>가</em>디건</a></li>
-					<li><a href=""><em>가</em>디건형니트</a></li>
-					<li><a href=""><em>가</em>드밴드레깅스</a></li>
-					<li><a href=""><em>가</em>을잠옷</a></li>
-				</ul>
+<!--				<ul>-->
+<!--					<li><a href=""><em>가</em>을컬리수</a></li>-->
+<!--					<li><a href=""><em>가</em>드상하</a></li>-->
+<!--					<li><a href=""><em>가</em>죽자켓</a></li>-->
+<!--					<li><a href=""><em>가</em>죽밸트</a></li>-->
+<!--					<li><a href=""><em>가</em>운</a></li>-->
+<!--					<li><a href=""><em>가</em>을</a></li>-->
+<!--					<li><a href=""><em>가</em>디건</a></li>-->
+<!--					<li><a href=""><em>가</em>디건형니트</a></li>-->
+<!--					<li><a href=""><em>가</em>드밴드레깅스</a></li>-->
+<!--					<li><a href=""><em>가</em>을잠옷</a></li>-->
+<!--				</ul>-->
 			</div>
 			<div class="exfind_blk">
 				<!-- 검색어 매칭 브랜드 있을 시 노출  -->
 				<div class="find_brand">
-					<h3><a href="">나이키 주니어 샵 바로가기</a></h3>
+<!--					<h3><a href="">나이키 주니어 샵 바로가기</a></h3>-->
 				</div>
 				<!-- //검색어 매칭 브랜드 있을 시 노출  -->
 				<!-- 검색어 매칭 카테고리 있을 시 노출  -->
 				<div class="find_category">
-					<ul>
-						<li>
-							<span class="category_txt">카테고리</span>
-							<a href="">
-								<span>여성</span>
-								<span><em>니트가디건/베스트</em></span> <!-- 210419_수정 : em태그 전체 텍스트 감싸는 형식. -->
-							</a>
-						</li>
-						<li>
-							<span class="category_txt">카테고리</span>
-							<a href="">
-								<span>남성</span>
-								<span><em>니트/가디건/베스트</em></span> <!-- 210419_수정 : em태그 전체 텍스트 감싸는 형식. -->
-								<span>가디건</span>
-								<span>롱가디건</span>
-							</a>
-						</li>
-					</ul>
+<!--					<ul>-->
+<!--						<li>-->
+<!--							<span class="category_txt">카테고리</span>-->
+<!--							<a href="">-->
+<!--								<span>여성</span>-->
+<!--								<span><em>니트가디건/베스트</em></span> &lt;!&ndash; 210419_수정 : em태그 전체 텍스트 감싸는 형식. &ndash;&gt;-->
+<!--							</a>-->
+<!--						</li>-->
+<!--						<li>-->
+<!--							<span class="category_txt">카테고리</span>-->
+<!--							<a href="">-->
+<!--								<span>남성</span>-->
+<!--								<span><em>니트/가디건/베스트</em></span> &lt;!&ndash; 210419_수정 : em태그 전체 텍스트 감싸는 형식. &ndash;&gt;-->
+<!--								<span>가디건</span>-->
+<!--								<span>롱가디건</span>-->
+<!--							</a>-->
+<!--						</li>-->
+<!--					</ul>-->
 				</div>
 				<!-- //검색어 매칭 카테고리 있을 시 노출  -->
 			</div>
@@ -173,96 +173,24 @@
 				<h3>관련상품</h3>
 				<div class="realtime_wrap">
 					<div class="itemsGrp">
-						<div class="item_prod">
-							<div class="item_state">
-								<a href="#none" class="itemLink">
-									<div class="itemPic">
-										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-									</div>
-									<p class="itemBrand">BRAND NAME1</p>
-									<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-									<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-									<p class="itemPrice cols">
-										<span class="itemPrice_original">89,000</span>
-										80,100
-										<span class="itemPercent">10%</span>
-									</p>
-									<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								</a>
-							</div>
-						</div>
-						<div class="item_prod">
-							<div class="item_state">
-								<a href="#none" class="itemLink">
-									<div class="itemPic">
-										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-									</div>
-									<p class="itemBrand">BRAND NAME1</p>
-									<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-									<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-									<p class="itemPrice cols">
-										<span class="itemPrice_original">89,000</span>
-										80,100
-										<span class="itemPercent">10%</span>
-									</p>
-									<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								</a>
-							</div>
-						</div>
-						<div class="item_prod">
-							<div class="item_state">
-								<a href="#none" class="itemLink">
-									<div class="itemPic">
-										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-									</div>
-									<p class="itemBrand">BRAND NAME1</p>
-									<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-									<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-									<p class="itemPrice cols">
-										<span class="itemPrice_original">89,000</span>
-										80,100
-										<span class="itemPercent">10%</span>
-									</p>
-									<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								</a>
-							</div>
-						</div>
-						<div class="item_prod">
-							<div class="item_state">
-								<a href="#none" class="itemLink">
-									<div class="itemPic">
-										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-									</div>
-									<p class="itemBrand">BRAND NAME1</p>
-									<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-									<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-									<p class="itemPrice cols">
-										<span class="itemPrice_original">89,000</span>
-										80,100
-										<span class="itemPercent">10%</span>
-									</p>
-									<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								</a>
-							</div>
-						</div>
-						<div class="item_prod">
-							<div class="item_state">
-								<a href="#none" class="itemLink">
-									<div class="itemPic">
-										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">
-									</div>
-									<p class="itemBrand">BRAND NAME1</p>
-									<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-									<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-									<p class="itemPrice cols">
-										<span class="itemPrice_original">89,000</span>
-										80,100
-										<span class="itemPercent">10%</span>
-									</p>
-									<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
-								</a>
-							</div>
-						</div>
+<!--						<div class="item_prod">-->
+<!--							<div class="item_state">-->
+<!--								<a href="#none" class="itemLink">-->
+<!--									<div class="itemPic">-->
+<!--										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg">-->
+<!--									</div>-->
+<!--									<p class="itemBrand">BRAND NAME1</p>-->
+<!--									<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>-->
+<!--									&lt;!&ndash; cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. &ndash;&gt;-->
+<!--									<p class="itemPrice cols">-->
+<!--										<span class="itemPrice_original">89,000</span>-->
+<!--										80,100-->
+<!--										<span class="itemPercent">10%</span>-->
+<!--									</p>-->
+<!--									&lt;!&ndash; //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. &ndash;&gt;-->
+<!--								</a>-->
+<!--							</div>-->
+<!--						</div>-->
 					</div>
 				</div>
 			</div>
@@ -271,9 +199,10 @@
 
 		<!-- 검색결과 없을때 노출 -->
 		<div class="empty_box">
+		<div class="">
 			<div class="nodata">
 				<p>
-					<span class="keyword">'티비제이 제기장 스웨터'</span>에 맞는 상품을 찾지 못했습니다.<br>
+					<span class="keyword" id="noDataKeyword"></span>에 맞는 상품을 찾지 못했습니다.<br>
 					검색어를 변경해 보세요.
 				</p>
 			</div>
@@ -450,7 +379,132 @@
 				$("#popularKeyArea").append(tag);
 			});
 		}
+
+		//통합검색 - 검색어 입력 시
+		//
 	});
+
+	var fnGetAutoSearch = function (){
+		gagajf.ajaxFormSubmit("/display/search/auto/complete", document.searchMainForm, fnAutoCompleteList);
+	}
+
+	let fnAutoCompleteList = function (result){
+		console.log(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()+"'");
+			$('.common_search .area_result .empty_box').show();
+		}else{
+			// 자동완성 키워드
+			if(result.autoKeywords != null && result.autoKeywords.length > 0){
+				$(".autokeyword_blk").html('');
+				let tag = '';
+				tag += '<ul>\n';
+				$.each(result.autoKeywords, function (idx, item){
+					//<a href="javascript:void(0);"><em>가</em>을컬리수</a>
+					tag += '<li><a href="javascript:void(0);">'+result.autoKeywords[idx]+'</a></li>\n';
+				});
+				tag += '</ul>\n';
+				$(".autokeyword_blk").append(tag);
+			}
+
+			if(result.brand != null){
+				$(".find_brand").html('');
+				let tag = '';
+				tag += '<h3><a href="javascript:void(0);" onclick="cfnGoToBrandMain('+result.brand.brandGroupNo+');">'+result.brand.brandGroupNm+' 샵 바로가기</a></h3>\n';
+				$(".find_brand").append(tag);
+			}
+			if(result.cateList != null && result.cateList.length > 0){
+				$(".find_category").html('');
+				let tag = '';
+				tag += '<ul>\n';
+				$.each(result.cateList, function (idx, item){
+					tag += '<li>\n';
+					tag += '	<span class="category_txt">카테고리</span>\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';
+				$(".find_category").append(tag);
+			}
+			if(result.goodsList != null && result.goodsList.length > 0){
+				$(".pd_list .realtime_wrap .itemsGrp").html('');
+				let tag = '';
+				$.each(result.goodsList, function (idx, item){
+					if(idx<5) {
+						tag += '<div class="item_prod">\n';
+						tag += '	<div class="item_state">\n';
+						tag += '		<a href="javascript:void(0);" class="itemLink">\n';
+						tag += '			<div class="itemPic">\n';
+						tag += '				<img alt="" class="vLHTC pd_img" src="' + item.sysImgNm + '">\n';
+						tag += '			</div>\n';
+						tag += '			<p class="itemBrand">' + item.brandGroupNm + '</p>\n';
+						tag += '			<div class="itemName">' + item.goodsFullNm + '</div>\n';
+						tag += '			<p class="itemPrice cols">\n';
+						if (item.listPrice != item.currPrice) {
+							tag += '				<span class="itemPrice_original">' + item.listPrice.addComma() + '</span>\n';
+						}
+						tag += item.currPrice.addComma();
+						if (item.listPrice != item.currPrice) {
+							tag += '				<span class="itemPercent">' + (item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100 + '%</span>\n';
+						}
+						tag += '			</p>\n';
+						tag += '		</a>\n';
+						tag += '	</div>\n';
+						tag += '</div>\n';
+					}
+				});
+
+				$(".pd_list .realtime_wrap .itemsGrp").append(tag);
+			}
+		}
+	}
+
+	var fntestKey = function (obj){
+		var searchValue = $(obj).val();
+		if(searchValue.length > 0) {
+			$('.common_search .area_result .default_box').hide();
+			$('.common_search .area_result .searching_box').show();
+			$('.common_search .area_result .empty_box').hide();
+			fnGetAutoSearch();
+		} else if (searchValue.length == 0) {
+			$('.common_search .area_result .searching_box').hide();
+			$('.common_search .area_result .default_box').show();
+			$('.common_search .area_result .empty_box').hide();
+		}
+	}
 	/*]]>*/
 </script>
 </html>

src/main/webapp/biz/search.js

@@ -278,6 +278,7 @@ var filterSel = function (obj, gubun, staus, sizeGb){
 
 var fnFilterSet = function (searchId, sizeGb, appGb){
 	fnCategoryGoodsInfiniteScrollInit();
+	console.log(searchId);
 	$("#searchGoodsForm input:hidden[name="+searchId+"Arr]").remove();
 	var tag = '';
 	var mobTag = '';
@@ -570,4 +571,37 @@ var fnFilterSlider = function (gubun, min, max){
 	fnSearchGoodsListSearch();
 }
 
+// 상품상세 필터 조회
+var fnSelectFilerMob = function (obj, gubun, staus, sizeGb){
+	gagaInfiniteScroll.pageStatus.filterHtml = filterHtml;
+	gagaInfiniteScroll.pageStatus.filterStatHtml = filterStatHtml;
+	let $obj = $(obj);
+	if(staus=='on'){
+		if(gubun=='size'){
+			$(obj).attr('onclick','fnSelectFilerMob(this,\''+gubun+'\',\'off\',\''+sizeGb+'\');');
+		}else{
+			$(obj).attr('onclick','fnSelectFilerMob(this,\''+gubun+'\',\'off\',\'\');');
+		}
+
+		$("#filterData").find('span').each(function(idx,item) {
+			if(gubun=='color'){
+				if($obj.attr('data-id').replace('#','').trim() == $(this).closest("span").attr('id')) {
+					$(this).closest("span").remove();
+				}
+			}else{
+				if($obj.attr('data-id') == $(this).closest("span").text()) {
+					$(this).closest("span").remove();
+				}
+			}
+		});
+	}else{
+		if(gubun=='size'){
+			$(obj).attr('onclick','fnSelectFilerMob(this,\''+gubun+'\',\'on\',\''+sizeGb+'\');');
+		}else{
+			$(obj).attr('onclick','fnSelectFilerMob(this,\''+gubun+'\',\'on\',\'\');');
+		}
+	}
+	fnFilterSet(gubun, sizeGb, 'Mob');
+}
+
 //****************상품리스트  end **********************************