콤보박스를 만들 때 흔히 사용하는 select 태그와 관련해 유용한 플러그인을 하나 소개해드릴까 합니다.
select 태그에는 일반적으로 option 값에 대한 검색이 불가능합니다. 하지만 select2 플러그인을 추가하면 option 값을 검색할 수 있습니다.
클라이언트의 요청으로 어떻게 구현하면 좋을지 구글링하던 중 발견한 플러그인으로 사용법이 간단하여 편하고 유용하게 잘 사용했던 기억이 납니다.
1) 사용을 위해 아래 링크를 프로젝트에 Import 하는 방법이 있고, 파일을 내려받아 Import 하는 방법이 있다.
아래 사이트에서 자세한 설명 확인이 가능하다.
2) select 태그 id로 select2() 실행
3) select2() 메서드를 실행하면 아래와 같이 검색창이 자동으로 생성된다.
사실상 설정은 이게 전부이며 여기서 값을 셋팅하거나 초기화하는 방법, 값을 가져오는 방법정도만 알면 필요할 때 잘 사용할 수 있다.
: 특정 값을 셋팅하고 싶은 경우 기존 jquery에서 val() 메서드로 값을 넣는 것까지 동일하고 뒤에 select2() 메서드를 추가하면 된다.
: 값을 가져올 때는 기존과 같이 val() 메서드를 사용하면 된다.
: 초기화하는 경우도 특별히 다를 것은 없이 val() 메서드 사용 후 select2() 메서드를 사용한다. (중요 : val(""))