다연이네

[days08] autocomplete() 본문

Web/JavaScript

[days08] autocomplete()

　다연　 2020. 12. 18. 21:22
반응형

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    
    $( "#tags" ).autocomplete(
    		{	 source: availableTags 	} //js Object
    		);
  } );
  </script>

</head>
<body>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style> 
  #txtSearch{
    border: solid 1px black;
    width: 250px; 
  }
  #searchList{
    visibility:hidden; 
    width: 250px; height:200px;
    border:solid 1px gray;
    position: absolute;
    left:70px;    top : 30px;
  }
  #searchList_Header{
    width:96%;    height:16px;
    background: #d3d3d3;
    padding: 5px;
    font-size: 13px;    font-weight: bold;
  }
  
  
  .item{
    color:red;
    font-weight: bold;
  }
</style>

</head>
<body>
<div>
검색어 : <input type="text" id="txtSearch" name="txtSearch"  
onkeyup="txtSearch_keyup();" />
<div id="searchList">
    <div id="searchList_Header">검색어 자동 완성</div>
    <div id="searchList_Items"></div>
  </div>
</div>
<hr>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<script>
//검색결과를 저장할 배열 선언
var items =[];
function txtSearch_keyup() {
   var searchWord = document.getElementById("txtSearch").value;
   var searchList = document.getElementById("searchList");
   var searchList_Items = document.getElementById("searchList_Items"); 
   
   searchList_Items.innerHTML = "";
   

   //입력받은 검색어를 가지고 DB -> select 그 조회 결과물을 items배열에 저장
   switch (searchWord) {
      case "가":
         items = ["가","가격","가격비교","가격비교사이트"
            ,"가자미","가자재곤","가판대","가수"];
         break;
      case "가격":
         items = [ "가격","가격비교","가격비교사이트" ]; 
         break;
      case "가격비":
         items = [ "가격비교","가격비교사이트" ];
         break;
      case "가자":
         items = [ "가자미","가자재곤" ];
         break;
      } //switch
      
      // searchList_Items 에 검색결과 item을 div로 생성해서 추가
     
      for (var i = 0; i < items.length; i++) {
         var itembox = document.createElement("div");
         itembox.innerHTML = items[i].replace(
        		 searchWord, "<span class='item'>"+searchWord+"</span>");
         itembox.onmouseover = function () {
        	 this.style.backgroundColor="lightgray";
         }
         itembox.onmouseout = function () {
        	 this.style.backgroundColor="#FFF";
         }
         searchList_Items.appendChild(itembox);
   }
    // searchList 보이기
   searchList.style.visibility = "visible";
}//keyup
</script>
</body>
</html>

jQuery로 수정

<script>

var items =[];

$("#txtSearch").keyup(function(event) {
	var searchWord = $(this).val();
	$("#searchList_Items").empty();
	
   
   if(searchWord.trim()==""){
	   $("#searchList").css("visibility", "hidden");
	   return;
   }

   switch (searchWord) {
      case "가":
         items = ["가","가격","가격비교","가격비교사이트"
            ,"가자미","가자재곤","가판대","가수"];
         break;
      case "가격":
         items = [ "가격","가격비교","가격비교사이트" ]; 
         break;
      case "가격비":
         items = [ "가격비교","가격비교사이트" ];
         break;
      case "가자":
         items = [ "가자미","가자재곤" ];
         break;
      } //switch
      
     
      for (var i = 0; i < items.length; i++) {
        	 $("<div></div>").html(
           			items[i]
        			.replace(searchWord,"<span class='item'>"+searchWord+"</span>"))
        			.hover(
        			 function (event) {
						$(this).css("backgroundColor","#FFCC66");
						}, function(event) {
						$(this).css("backgroundColor","#FFF");})
                    .appendTo($("#searchList_Items"));
        //A.append(B) A부모B자식
        //B.appendTo(A) 
   }
    // searchList 보이기
    $("#searchList").css("visibility", "visible");
}); //keyup
</script>
</body>
</html>
반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days08] 쿠키(Cookie)  (0) 2020.12.18
[days08] 모달(modal)/모달리스  (0) 2020.12.18
[days07] js 팝업상자(대화상자), 클릭시 랜덤 이미지 발생  (0) 2020.12.17
[days07] js BOM  (0) 2020.12.17
[days07] DOM사용 예시  (0) 2020.12.17
'Web/JavaScript' Related Articles more
Comments