Study/라이브러리

[라이브러리] Select2 사용법

taecongs 2023. 9. 14. 10:26

알고있으면 좋은 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) 파일 다운로드하여 사용하기

 

(3) 예제를 통해 Select2 라이브러리 사용하기

// Select2 라이브러리 사용하기 전의 코드
$selectBld.addEventListener('change', async (e) => {
      (... 생략 ...)
});


// Select2 라이브러리 사용을 위해 JQuery 코드로 변환
$('#selectBld').on('change', async function(e) {
   
        // 결과가 없을 경우 영문에서 원하는 텍스트로 변경하기
        $('#selectBld').select2({
            language : {
                noResults : function(params){
                    return "결과를 찾을 수 없습니다.";
                }
            }
        });

      (... 생략 ...)
});