[Javascript] Select2 (Select searching, multiselect, ajax)

Open source/Javascript, Jquery, CSS  2019. 8. 27. 18:25

안녕하세요. 명월입니다.


이 글은 Javascript 라이브러리 Select2 (Select searching, multiselect, ajax)에 관한 글입니다.


우리가 웹 프로그램을 하면서 유저로 부터 데이터를 받기 위해서는 input textbox, checkbox 또는 textarea, select 오브젝트 등을 많이 이용합니다.

그 중에서 input textbox를 가장 많이 이용하겠지만, 주어진 데이터를 선택하기 위한 select 오브젝트도 많이 사용될 듯 싶습니다.


일반 select를 사용하기 되면 아래와 같은 이미지가 되겠네요.

일단은 예제로 option을 40개 정도 만들었는데 select에 붙였습니다.

사실 이렇게 써도 문제가 되지는 않습니다. 근데 40개일 뿐인데도 select option이 너무 많아서 찾기가 힘드네요. 그럼 이게 200개, 500개, 1000개까지 가면 어떨까요?

Select를 선택하기 위해서 option 아이템의 1000개를 찾아보고 선택을 해야할 것입니다. 아마 유저로써는 매우 불편하겠네요. 제 예제는 그나마 option1로 무언가 규칙이 있어서 보기가 쉽지만 item 하나하나가 영어로 되있다고 하면 select 찾는데만 몇 분 소요 될 것입니다.

매우 불편합니다.


select2 라이브러리는 이런 것을 해소해 주기 위한 기능을 제공하고 있습니다. select2의 기능은 매우 많은데 그중 searching과 multiselect, ajax에 관해서만 설명하겠습니다.


혹시 더 알고 싶은 예제가 있으면 댓글을 남겨주세요. 추가하겠습니다.

링크 - https://select2.org


먼저 select2의 cdn은 아래와 같습니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.min.js"></script>

Searching

이 searching기능은 특별히 select2를 연결해서 설정하는 옵션없이 기본 옵션입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Select2 Test</title>
    <!-- select2 css cdn -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css" rel="stylesheet" />
  </head>
  <body>
    <br />
    <div style="margin-left:10px;">
      <select class="form-control">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
        <option>option5</option>
        <option>option6</option>
        <option>option7</option>
        <option>option8</option>
        <option>option9</option>
        <option>option10</option>
        <option>option11</option>
        <option>option12</option>
        <option>option13</option>
        <option>option14</option>
        <option>option15</option>
        <option>option16</option>
        <option>option17</option>
        <option>option18</option>
        <option>option19</option>
        <option>option20</option>
        <option>option21</option>
        <option>option22</option>
        <option>option23</option>
        <option>option24</option>
        <option>option25</option>
        <option>option26</option>
        <option>option27</option>
        <option>option28</option>
        <option>option29</option>
        <option>option30</option>
        <option>option31</option>
        <option>option32</option>
        <option>option33</option>
        <option>option34</option>
        <option>option35</option>
        <option>option36</option>
        <option>option37</option>
        <option>option38</option>
        <option>option39</option>
      </select>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- select2 javascript cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.min.js"></script>
    <script>
      // select2 초기화
      $('select').select2();
    </script>
  </body>
</html>

예제

그러나 select2이지만 이 셀렉트 기능이 필요없을 때가 있을 수 있습니다. 꼭 이 search 기능이 편한 것만은 아닙니다. 예를 들면, 셀렉트 항목이 매우 적을 경우에는 굳이 UI가 복잡하게 넣을 필요가 없습니다.

$('select').select2({
	minimumResultsForSearch: Infinity
});

예제


Multiselect

multiselect는 우리가 select 기능을 사용할 때, 한 개의 선택값이 아닌 복수의 선택값이 필요로 할 떄가 있습니다. 물론 list로 표현하면 가능은 합니다만 select 오브젝트에서도 사용하고 싶을 때 사용하면 됩니다.

이는 사실 select2의 기능이라기 보다는 select에서 list형식으로 표현하는 「multiple="multiple"」 속성을 추가하게 되면 나옵니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Select2 Test</title>
    <!-- select2 css cdn -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css" rel="stylesheet" />
  </head>
  <body>
    <br />
    <div style="margin-left:10px;">
      <!-- 속성에 multiple를 추가합시다. -->
      <select class="form-control" multiple="multiple">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
        <option>option5</option>
        <option>option6</option>
        <option>option7</option>
        <option>option8</option>
        <option>option9</option>
        <option>option10</option>
        <option>option11</option>
        <option>option12</option>
        <option>option13</option>
        <option>option14</option>
        <option>option15</option>
        <option>option16</option>
        <option>option17</option>
        <option>option18</option>
        <option>option19</option>
        <option>option20</option>
        <option>option21</option>
        <option>option22</option>
        <option>option23</option>
        <option>option24</option>
        <option>option25</option>
        <option>option26</option>
        <option>option27</option>
        <option>option28</option>
        <option>option29</option>
        <option>option30</option>
        <option>option31</option>
        <option>option32</option>
        <option>option33</option>
        <option>option34</option>
        <option>option35</option>
        <option>option36</option>
        <option>option37</option>
        <option>option38</option>
        <option>option39</option>
      </select>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- select2 javascript cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.min.js"></script>
    <script>
      // select2 초기화
      $('select').select2();
    </script>
  </body>
</html>

예제

물론 검색기능도 유효합니다. 여기서 멀티 셀렉트의 갯수를 제어하고 싶으면 「maximumSelectionLength: 2」를 옵션으로 추가하면 됩니다.

$('select').select2({
	maximumSelectionLength: 2
});

예제


Placeholder

select 화면에서 표시하고 싶은 문구가 있을 때는 placeholder를 사용합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Select2 Test</title>
    <!-- select2 css cdn -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css" rel="stylesheet" />
  </head>
  <body>
    <br />
    <div style="margin-left:10px;">
      <!-- 속성에 multiple를 추가합시다. -->
      <select class="form-control" multiple="multiple">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
        <option>option5</option>
        <option>option6</option>
        <option>option7</option>
        <option>option8</option>
        <option>option9</option>
        <option>option10</option>
        <option>option11</option>
        <option>option12</option>
        <option>option13</option>
        <option>option14</option>
        <option>option15</option>
        <option>option16</option>
        <option>option17</option>
        <option>option18</option>
        <option>option19</option>
        <option>option20</option>
        <option>option21</option>
        <option>option22</option>
        <option>option23</option>
        <option>option24</option>
        <option>option25</option>
        <option>option26</option>
        <option>option27</option>
        <option>option28</option>
        <option>option29</option>
        <option>option30</option>
        <option>option31</option>
        <option>option32</option>
        <option>option33</option>
        <option>option34</option>
        <option>option35</option>
        <option>option36</option>
        <option>option37</option>
        <option>option38</option>
        <option>option39</option>
      </select>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- select2 javascript cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.min.js"></script>
    <script>
      // select2 초기화
      $('select').select2({
        placeholder: '선택하여 주십시오.'
      });
    </script>
  </body>
</html>

예제

ajax 기능

select option item을 고정 데이터가 아닌 동적 item으로 사용할 때도 있습니다. 즉, search 쿼리식을 날려서 그 데이터 베이스에 그 결과를 검색하고 리턴하는 방법입니다. 그리고 params 설정을 할 수 있기 때문에 다른 오브젝트의 선택에 따라서 결과를 바꿀 수도 있습니다.

링크 - https://select2.org/data-sources/ajax

<!DOCTYPE html>
<html>
  <head>
    <title>Select2 Test</title>
    <!-- select2 css cdn -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css" rel="stylesheet" />
  </head>
  <body>
    <br />
    <div style="margin-left:10px;">
      <!-- 속성에 multiple를 추가합시다. -->
      <select class="form-control" multiple="multiple"></select>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- select2 javascript cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.min.js"></script>
    <script>
      // select2 초기화
      $('select').select2(
        ajax: {
          url: /*url 주소*/,
          dataType: 'json',
          delay: 250,
          cache: true,
          // 검색 쿼리를 만든다.
          data: function (params) {
            return {
            q: params.term
            };
          },
          // 결과를 표현한다.
          processResults: function (data) {
            return {
              results: data.results
            };
          }
        },
        placeholder: 'Search for a repository',
        minimumInputLength: 1
      });
    </script>
  </body>
</html>

{
  "results": [
    {
      "id": 1,
      "text": "Option1"
    },
    {
      "id": 2,
      "text": "Option2"
    }
  ],
  "pagination": {
    "more": false
  }
}

여기서 보면 pagination의 json데이터가 있는데 이게 꼭 있어야 되더라고요..없으면 에러가 납니다.

data.json

보통은 이 이상의 기능은 많이 사용하지 않습니다. 사용하게 되면 아래의 링크를 참조하세요.

링크 - https://select2.org/


여기까지 Javascript 라이브러리 Select2 (Select searching, multiselect, ajax)에 관한 글이였습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.

저작자표시

'Open source > Javascript, Jquery, CSS' 카테고리의 다른 글

[Javascript] Full calendar(스케줄 달력)의 사용법  (0) 2021.07.15
[Javascript] 그래프 오픈 라이브러리(jqplot)  (0) 2020.02.24
[Javascript] 브라우져 화면 캡쳐 라이브러리(html2canvas)  (0) 2019.11.22
[Javascript] 날짜 포맷 설정하는 방법(moment 라이브러리)  (0) 2019.08.22
[Javascript] 알람 메시지 라이브러리(toastr 라이브러리)  (0) 2019.08.21
Google OAuth 사용법  (0) 2019.06.18
[CSS] 구글 폰트 (Google font) 이용하기  (0) 2019.05.31
JqGrid  (0) 2015.07.14