💚04_HTML5 & Javascript & CSS

#javascript #datalist #select2 #Select2 플러그인(Jquery) #Chosen 플러그인(Jquery)

roomname-dev 2024. 5. 23.
728x90

👊select box를 사용하다보면 너무 많은 데이터로 인해 검색기능이 있으면 좋을때가 있다. 이때 사용하기 좋은 html5 태그를 소개할려고 합니다.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

#javascript #datalist #select2 #Select2 플러그인(Jquery) #Chosen 플러그인(Jquery) - 👊select box를 사용하다보면 너무 많은 데이터로 인해 검색기능이 있으면 좋을때가 있다. 이때 사용하기 좋은 html5 태그를 소개할려고 합니다.

🌱DataList(html5 기본 태그)

👊datalist태그는 html5에서 기본으로 제공하는 태그로 option태그에 값을 추가하면 input 태그를 검색을 통한 데이터 조회가 가능합니다. 

<html>
<head>
	<script>

			/* DOMContentLoaded */
			document.addEventListener('DOMContentLoaded',()=>{
			
			for (let a=0; a< 999; a++) {
			
			console.log("[a]" + a);
			
				document.querySelector("#browsers").insertAdjacentHTML("beforeend",
					'<option value="'+a+'" >'+a+
					'</option>'
				)					
				
			}		

			});
			/* DOMContentLoaded */
			/* Window Load */
			window.onload = function () {

			};
			/* Window Load */		

	</script>
	<style>
	</style>

</head>

	<div>
		<h1>dataList area</h1>
		<label for="myBrowser">Data ListArea :</label>
		<input list="browsers" id="myBrowser" name="myBrowser" />
		<datalist id="browsers"></datalist>
	</div>

</html>

 

but!!! 이태그를 통해 사용 하다가 500건 이상 데이터를 적재했을때 이슈사항이 발생했습니다. 

바로 500개 이상이 표출이 안되는 내역이 발생했습니다.

( 개발자 도구를 통해 보면 노드가 숨겨져 있음 -> 노드 전체 보기를 하면 1000개 까지 모두 보임 ) 

 

이에 모든 노드 보기를 해서 볼수는 있지만 일반 사용자들이 해당 내역을 볼수 없기에 어쩔수 없이 select2라이브러리를 가져와 사용하게 되었습니다. 

 

🌱Select2 플러그인(Jquery)

👊datalist는 500건까지는 표출이 되고 html5기본 태그이기 때문에 간결하게 사용할때는 사용하며 500건 이상을 표출해서 검색기능을 하고 싶을때는 jquery의 select2플러그인을 import해서 사용하는것이 좋을것 같습니다. 

 

#javascript #datalist #select2 #Select2 플러그인(Jquery) #Chosen 플러그인(Jquery) - 🌱Select2 플러그인(Jquery) - undefined - 👊datalist는 500건까지는 표출이 되고 html5기본 태그이기 때문에 간결하게 사용할때는 사용하며 500건 이상을 표출해서 검색기능을 하고 싶을때는 jquery의 select2플러그인을 import해서 사용하는것이 좋을것 같습니다. 

<html>
<head>
	<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
	<script>

			/* DOMContentLoaded */
			document.addEventListener('DOMContentLoaded',()=>{
			
				for (let a=0; a< 999; a++) {
				
				console.log("[a]" + a);
				
					document.querySelector("#e1").insertAdjacentHTML("beforeend",
						'<option value="'+a+'" >'+a+
						'</option>'
					)					
					
				}
				
				$("#e1").select2();
			

			});
			/* DOMContentLoaded */
			/* Window Load */
			window.onload = function () {

			};
			/* Window Load */		
			/* jquery document ready */		
			$(document).ready(function(){
				
			});
			/* jquery document ready */		

	</script>
	<style>
	</style>
</head>

	<body>
	  <select id="e1">
			<option value="AL">Alabama</option>
			<option value="WY">Wyoming</option>
		</select>

	</body>

</html>

 

🌱Chosen 플러그인(Jquery)

 

필자는 일전에 해당 플러그인을 사용했었다. 하지만 Git에 들어가보면 (https://github.com/harvesthq/chosen

7년전 commit이 마지막이라 이제 지원을 안하는것으로 보여집니다. 

https://harvesthq.github.io/chosen/

#javascript #datalist #select2 #Select2 플러그인(Jquery) #Chosen 플러그인(Jquery) - 🌱Chosen 플러그인(Jquery)

 

 

 

 

 

728x90