[스프링] 쇼핑몰 - 비동기 검색

관리자가 등록한 상품을 사용자가

 

회원가입 - 로그인 - 상품목록 - 상품내용 - 장바구니 - 주문 의 로직으로 주문을 완료하면

 

관리자가 다시 주문관리에서 배송 및 취소 등 주문관리를 통해 상품을 판매하고 쇼핑몰을 운영할 수 있도록 구현했다.

 

이번엔 그 중,  비동기 검색에 관한 포스팅을 작성하려고 한다.

 

 

검색은 상품목록 페이지에서 하는 것이 아닌,

 

상단바에 넣어서 사이트 어느곳이던 검색을 할 수 있도록 했고,

 

비동기로 처리해서 페이지 새로고침없이,

 

따로 버튼을 누르지 않고 키워드 입력만으로 검색이 되도록 만들었다.

 

---

---

VO

/*     */ public class ItemVO
/*     */ {
/*     */   private int item_no;
/*     */   private String item_admin;
/*     */   private String item_name;
/*     */   private String item_price;
/*     */   private String item_size;
/*     */   private String item_color;
/*     */   private int item_disc;
/*     */   private String item_content;
/*     */   private String item_imgsub;
/*     */   private Date item_date;
/*     */   private int item_star;
/*     */   private String item_catemain;
/*     */   private String item_catesub;
/*     */   private String item_subcontent;
/*     */   private String item_model;
/*     */   private String item_imgmain;
/*     */   private String[] item_option;
/*     */   private int[] item_vol;
/*     */   private String option_content;
/*     */   private String option_item_no;
/*     */   private int option_vol;
/*     */   private int option_no;

		//getter/setter
}

---

Mapper

	<select id="selectList" resultType="kr.co.vo.ItemVO">
		SELECT ITEM_NO , ITEM_NAME , ITEM_PRICE , ITEM_SIZE, ITEM_COLOR,
		ITEM_DISC, ITEM_CONTENT
		, ITEM_IMGMAIN, ITEM_IMGSUB, ITEM_DATE,
		ITEM_STAR, ITEM_CATEMAIN,
		ITEM_CATESUB
		FROM ITEM 
		WHERE 
		ITEM_NAME LIKE '%' || #{keyword} || '%'
		ORDER BY ITEM_NO DESC

	</select>

 

LIKE 문을 이용해서 키워드와 같은 상품이름을 검색한다

---

Controller

  @ResponseBody
  @RequestMapping(value="/selectList", method=RequestMethod.GET)
  public List<ItemVO> selectList(String keyword)throws Exception{
	  if(keyword == "") {
		  List<ItemVO> list = new ArrayList<>(); 
		  return list;
	  }
	 return mainService.selectList(keyword);
  }

검색어를 매개변수로 받아서, mapper에 넣어주고 값을 리턴해준다

---

View

 function selectList(){
	  var keyword = document.getElementById('keyword').value;
	  console.log("검색어 들옴?"+keyword);
	  $.ajax({
		  url : "/main/selectList",
		  type : "get",
		  dataType : "json",
		  data : {"keyword": keyword},
		  success : function(data){
			  var s = '';
			  if(data < 1){
				  s += '<div style="text-align:center"><h3>검색결과가 없습니다</h3></div>' ;
			  }
			  
				$.each(data, function(key,value){
					
					var price = new Intl.NumberFormat('ko-KR', {
						style : 'currency',
						currency : 'KRW'
					}).format(value.item_price);
	
					s +=	'<tr> <td style="width:18%"> <a href="/main/itemContent?item_no='+value.item_no+'"><img src="/img/'+value.item_imgmain+'"></a></td>';
	                s +=	'<td style="vertical-align : bottom; font-size:15px;"><a href="/main/itemContent?item_no='+value.item_no+'">'+value.item_name+' <p style="font-size:5px;">'+value.item_catesub+'</p></a></td>';
	                s += '	<td style="width:20%;vertical-align : middle; font-size:13px;">'+price+'</td> </tr>';
					s += '<hr/>';
				})
				
				$("#selectView").html(s);
			  
		  }
	  })
  };

input창에 입력한 값을 getElementById로 가져와주고,

 

값을 ajax의 data로 서버로 보낸다.

 

그 결과값 이용해서 html을 작성하고,  

 

each문으로 list만큼 반복,

 

$().html 로 보내준다.

---

상단바의 검색부분

              <li class="dropdown" style="font-size:13px;"><a class="dropdown-toggle"  href="#" data-toggle="dropdown"><i class="fa fa-fw">&#xF002;</i></a>
                <ul class="dropdown-menu">
                  <li class="dropdown" id="aaa">
                  <div style="width:550px;height:400px;  overflow:auto" class="bg-light">
                  
                  <div>
         	  <input class="form-control input-lg" type="text" id="keyword" name="keyword" onkeyup="selectList();"  placeholder="검색어를 입력해주세요">
                  </div>
                  <div id="selectView" class="bg-light">
                   <table class="table table-hover bg-light">
                    <tbody id="selectView">
										<div> <p style="font-size:20px">&nbsp;&nbsp;추천 검색어 </p> 
						<p style="font-size:15px">&nbsp;&nbsp;<strong>COAT </strong></p> 
						<p style="font-size:15px">&nbsp;&nbsp;<strong>PANTS</strong> </p>
						<p style="font-size:15px">&nbsp;&nbsp;<strong>SNIKERS</strong> </p>
						</div>
                    </tbody>
                  </table>
       
                  </div>
                  </div>
                  </li>
                </ul>
              </li>