Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

[jQuery] Select2 라이브러리 – 선택만이 아니라 입력도 할 수 있게 하기

Select2 라이브러리는 매우 강력하고 쉽다.

우리는 Select2 라이브러리를 이용해서 셀렉트 박스와 hidden input을 Select2 UI로 만들 수 있다. 그런데 셀렉트 박스 형식으로 UI를 사용하는 경우, 새로운 입력을 하게 만드는 것이 기본으로 제공되지 않는다. 물론 tag 기능을 이용하면 쉽게 구현할 수 있다. 그러나 tag 기능을 이용하면 UI가 tag 모양으로 나온다. 셀렉트 박스 형식의 UI가 필요할 때는 사용할 수 없는 방법이다.

따라서 다음 설명은 tag 기능을 이용하지 않고 셀렉트 박스 형식의 UI로 새로운 입력을 가능하게 하는 방법이다.

이렇게 만들 수 있다.

HTML

<input type="hidden" name="email_server" 
    data-list='[{"id":"hanmail.net","text":"hanmail.net"}, {"id":"gmail.com","text":"gmail.com"}, {"id":"naver.com","text":"naver.com"}, {"id":"hotmail.com","text":"hotmail.com"}]'
    data-default-value='{"id":"left21.com","text":"left21.com"}'
    id="email_server" class="select2-input">

JS

// 선택할 뿐 아니라 입력도 할 수 있는 select2. input[hidden]이어야 하고, data-liat 요소가 있어야 한다.
// default값을 지정하고 싶으면 data-default-value를 요소에 넣어 주면 된다.
$("input.select2-input").each(function(){
  try{
    var $this = $(this);
    var list = $this.data('list');
    var default_value = $this.data('default-value');
    var option = { 
      data: list,
      createSearchChoice: function (term){
        return {id: term, text: term};
      },
      initSelection: function (element, callback) {
            callback(default_value);
        }
    };

    $this.select2(option);

    // 기본값이 있다면 설정.
    if(default_value){
      $this.select2('val', default_value);
    }
  }catch(e){

  }
});

try, catch 구문은 query function not defined for Select2 undefined 라는 에러 메시지가 파이어폭스에서 나오면서 js 작동이 중지되는 것때문에 집어 넣은 것이다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다