[해피CGI][cgimall] 라이브 검색을 지원하는 유연한 다중 선택 플러그인 - jQuery 스크롤 다중 선택

- 소개 및 특징

스크롤 다중 선택 플러그인은 라이브 검색 지원을 통해 동적이고 대화형 다중 선택 드롭다운을 만드는 데 도움이 되는 가벼운 jQuery 플러그인입니다.

• 검색 기능 : 사용자 입력에 따른 항목의 실시간 필터링
• 유연한 선택 : 체크박스나 전체 행을 클릭하여 선택을 전환합니다.
• 동적 업데이트 : 초기화 후 프로그래밍 방식으로 항목 목록 수정
• 반응형 디자인 : 다양한 화면 크기와 기기에 적응합니다.
• 사용자 정의 가능한 스타일 : 프로젝트 테마에 맞게 기본 스타일을 재정의합니다.
• 포괄적인 API : JavaScript 메서드를 통해 선택 항목을 가져오고, 설정하고, 조작합니다.
• 선택한 항목 미리보기 : 구성 가능한 미리보기 제한을 사용하여 선택한 항목을 표시합니다.
• 전체 지우기 기능 : 단일 작업으로 일괄 선택 해제

- 라이센스

MIT





- 사용 방법

1. 플러그인을 다운로드하고 다음 파일을 웹페이지에 추가하세요.

2. 다중 선택 드롭다운이 렌더링될 빈 컨테이너 요소를 만듭니다.

3. 컨테이너 요소에서 플러그인을 초기화하고 id, label, value 속성을 사용하여 객체 배열에서 옵션을 정의합니다.

4. 플러그인을 사용자 정의하는 데 사용할 수 있는 옵션.

 

placeholder: 선택된 항목이 없을 때 표시되는 텍스트입니다.

searchPlaceholder: 검색 입력 필드의 플레이스홀더 텍스트입니다.

maxHeight: 스크롤바가 나타나기 전 항목 목록의 최대 높이입니다.

showSelectedPreview: 헤더 아래에 선택한 항목의 태그를 표시하는 Boolean( true/false)입니다.

maxPreviewItems: "+X개 더" 메시지를 표시하기 전에 선택된 항목 태그의 개수입니다.

onSelectionChange: 선택 항목이 수정될 때마다 실행되는 콜백 함수입니다. 현재 선택된 값의 배열을 받습니다.

 

 

5. API 메소드.

- 작동 화면