알고있으면 좋은 Tip✨
Select2
- 기본적인 selectbox 태그를 사용하게 되면, 커스텀이 어렵기 때문에 기본적인 기능만을 사용해야 한다.
- 데이터가 많아 리스트의 내용이 길더라도 검색을 할 수 없기 때문에 이용에 불편함을 느낄 수 있다.
- 이러한 부분들을 Select2 라이브러리를 사용하면 손쉽게 커스텀도 가능하고 검색도 가능하다.
- 공식 사이트 : https://select2.org//
(1) <script> 태그로 라이브러리 사용하기
<!DOCTYPE html>
{% load static %}
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/static/frontend_b/css/select2.css" />
<title>Hyundai</title>
</head>
<body>
<div id="container">
{% block header %}
{% endblock %}
{% block section %}
{% endblock %}
{% block footer%}
{% endblock %}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</body>
</html>
(2) 파일 다운로드하여 사용하기
- 다운로드 사이트 : https://github.com/select2/select2/releases
(3) 예제를 통해 Select2 라이브러리 사용하기
// Select2 라이브러리 사용하기 전의 코드
$selectBld.addEventListener('change', async (e) => {
(... 생략 ...)
});
// Select2 라이브러리 사용을 위해 JQuery 코드로 변환
$('#selectBld').on('change', async function(e) {
// 결과가 없을 경우 영문에서 원하는 텍스트로 변경하기
$('#selectBld').select2({
language : {
noResults : function(params){
return "결과를 찾을 수 없습니다.";
}
}
});
(... 생략 ...)
});
'Study > 라이브러리' 카테고리의 다른 글
| [라이브러리] moment.js 사용법 (0) | 2024.01.02 |
|---|---|
| [라이브러리] dotenv를 통해 .env 파일로 관리하기 (0) | 2024.01.02 |
| [라이브러리] ApexCharts.js 사용법 (0) | 2023.09.05 |
| [라이브러리] CountUp.js 사용법 (0) | 2023.09.05 |