UI Laboratory

UI 개발을 위한 레퍼런스

자동 완성
레이어

아래는 검색어 입력시 연관 검색어에 대한 자동완성 기능을 보여주는 레이어 팝업이다.

autoComplete(target)
- target : 검색박스의 컨테이너 엘리먼트(ID 또는 Class명)
설명
텍스트 박스에 키입력이 들어가면 자동완성 레이어가 나타난다. 이때 ↓ 화살표를 누르면 자동완성 레이어로 커서가 이동하며 ↓↑ 화살표로 검색어 이동이 가능하고 검색어에 따라 추천상품이 변경된다. 자동완성 레이어 또는 입력박스에서 마우스를 아웃하면 레이어도 사라진다. 또한 입력박스에 검색 키워드가 있고 마우스 클릭시에도 자동완성 레이어가 나타난다.

autoComplete('fieldset.search');

자동완성 레이어

HTML


					<fieldset class="search">
						Search
						 검색
						
					
				

CSS

					<style type="text/css">
						 fieldset.search {position:relative; z-index:10; width:335px; margin:10px auto;}
							 fieldset.search input.text {display:inline-block; width:263px; height:20px; padding-left:10px; background-color:#f4f4f4; border:1px solid #999; line-height:20px;}
							 fieldset.search .auto-complete {display:none; position:absolute; left:0; top:23px; width:317px; z-index:10; background-color:#f4f4f4; border:1px solid #999; *zoom:1;}
							 fieldset.search .auto-complete > dl.keyword {float:left; width:220px; height:236px; /*border-bottom:1px solid #999;*/}
							 fieldset.search .auto-complete > dl.keyword dt {width:219px; height:27px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; line-height:29px; text-align:center;}
							 fieldset.search .auto-complete > dl.keyword dt em {font-weight:bold; font-style:normal; }
							 fieldset.search .auto-complete > dl.keyword dd {padding:8px 0; border-right:1px solid #ddd;}
							 fieldset.search .auto-complete > dl.keyword dd ul.list li {background-image:none; padding:0; margin:0;}
							 fieldset.search .auto-complete > dl.keyword dd ul.list a {display:block; padding-left:15px; font-size:11px; color:#999; line-height:24px;}
							 fieldset.search .auto-complete > dl.keyword dd ul.list a.current {background-color:#e4e4e4;}
							 fieldset.search .auto-complete > dl.keyword dd ul.list a em {font-style:normal; font-weight:bold;}
							 fieldset.search .auto-complete > dl.recom-prt {float:left; width:96px; height:236px; /*border-bottom:1px solid #999;*/}
							 fieldset.search .auto-complete > dl.recom-prt dt {width:96px; height:27px; border-bottom:1px solid #ccc; line-height:29px; text-align:center;}
							 fieldset.search .auto-complete > dl.recom-prt dt em {font-weight:bold; font-style:normal; }
							 fieldset.search .auto-complete > dl.recom-prt dd {position:relative; width:97px; height:208px; background-color:#eee;}
							 fieldset.search .auto-complete > dl.recom-prt dd .prt-cont {display:none; position:absolute; left:15px; top:15px; z-index:8;}
							 fieldset.search .auto-complete > dl.recom-prt dd .prt-cont.active {z-index:10;}
							 fieldset.search .auto-complete > dl.recom-prt dd .prt-cont.last-active {z-index:9;}
							 fieldset.search .auto-complete > dl.recom-prt dd ul.prd-list {width:66px;}
							 fieldset.search .auto-complete > dl.recom-prt dd ul.prd-list li {margin-bottom:12px; text-align:center;}
							 fieldset.search .auto-complete > dl.recom-prt dd ul.prd-list li .pic {margin-bottom:3px; font-size:0; line-height:0;}
							 fieldset.search .auto-complete > dl.recom-prt dd ul.prd-list li .prt-name a.brand {font-size:11px; color:#666; line-height:1; text-decoration:underline;}					
					</style>
				

Javascript

					<script type="text/javascript">

						function autoComplete(target){
							var $search = $(target);
							var $searchList = $search.find('#autocomplete ul.list');
							var $recomPrt = $search.find('#autocomplete .prt-cont');
							var cnt = 0;

							$recomPrt.filter(':first-child').show();

							$search.bind({
								'click' : function(e){
									//$(this).find('#autocomplete').show();
								},
								'mouseleave' : function(){
									$(this).find('#autocomplete').hide();
								}
							});

							$search.find('> input#searchKeyword').each(function(){
								$(this).bind({
									'click' : function(e){
										$(this).attr("value","");
										$(this).unbind("click");
										$(this).bind("click focusin",function(){
											if($(this).val() != null && $(this).val() != "" && $searchList.children().val()!=null){
												$search.find('#autocomplete').show();
												autoSearchList();
											}
										});
									},
									'keyup' : function(e){
										if(e.which == 38 || e.which == 40){

											var len = $searchList.children().length;

											if(len > 0){
												var curr = $searchList.children().find('a.current').parent();
												var target = null;

												if(e.which == 38){		//위 화살표
													cnt--;
													cnt %= len;
													target = $(curr).prev();
													if(target.length == 0){target = $searchList.children().eq(len-1);}
												}else if(e.which == 40){	//아래 화살표
													cnt++;
													cnt %= len;
													target = $(curr).next();
													if(target.length == 0){target =$searchList.children().eq(0);}
												}

												if(target != null && target.length > 0 ){ 
													console.log(cnt);
													var keyword = target.find("a").text();
													$("input#searchKeyword").val(keyword);

												   $(curr).find("a.current").removeClass("current");
												   $(target).find("a").addClass("current");

													$recomPrt.hide();
													$recomPrt.eq(cnt).show();
												}
											}
										}
									},
									'keydown' : function(e){
										var kc=e.keyCode||e.which;
								
										if(e.type=='keydown'){
											if( (kc>=48 && kc<=57)	/*0-9*/ 
												|| (kc>=65 && kc<=90) /*A-Z*/ 
												|| (kc>=96 && kc<=105) /*numpad 0-9*/
												|| (kc==229)) /*한글*/ {
												
												if(kc==21) return false;
												$search.find('#autocomplete').show();
												autoSearchList();
											}
										}
									}
								});
							});

							function autoSearchList() {
								if($searchList.val()!=null) {
									$searchList.children().each(function(idx){
										$(this).parent().find("li a").removeClass("current");
										$(this).hover(function(){
											var keyword = $(this).find("a").text();
											$("input#searchKeyword").val(keyword);

											$recomPrt.hide();
											$recomPrt.eq(idx).show();

											$(this).find("a").addClass("current");

											cnt = idx;

										},function(){
											$(this).parent().find("li a").removeClass("current");
										});
										$(this).bind('focusin',function(){
											var keyword = $(this).find("a").text();
											$("input#searchKeyword").val(keyword);

											$(this).parent().find("li a").removeClass("current");
											$(this).find("a").addClass("current");
										});

										$(this).filter(':last-child').bind('focusout',function(){
											$search.find('#autocomplete').hide();
											$search.find('> input[type=text]').unbind('focusin');
										});
									});
									$searchList.children().eq(0).find("a").addClass("current");
								}
							}
						}

						autoComplete('fieldset.search');

					</script>