[해피CGI][cgimall] Tailwind CSS로 스타일링된 최신 사용자 지정 선택 플러그인 - jQuery IO Select

- 소개

IO Select는 일반 select 요소를 Tailwind CSS로 스타일링된 검색 가능한 태그 입력란으로 변환하는 경량 jQuery 사용자 지정 select 플러그인입니다.

- 특징

- 다중 선택(태그로 표시됨)

- 다크 모드

- 접근성(ARIA 속성, 키보드 탐색)

- 모바일 친화적

 

- 라이센스

MIT





- 사용 방법


1. IO Select를 설치하고 jQuery 프로젝트에 임포트하세요.

2. 또는 jQuery와 TailwindCSS가 설치된 문서에 'io-select.js' 스크립트를 직접 로드하세요.

3. 기존 선택 요소에 플러그인을 초기화합니다.

4.  가능한 모든 플러그인 옵션:

• placeholder: 선택 항목이 없을 때 표시되는 텍스트
• searchPlaceholder: 검색 입력란에 들어갈 자리 표시자 텍스트
• noResultsText검색 결과가 없을 때 표시되는 텍스트입니다.
• loadingText로딩 중에 표시할 텍스트
• onErrorText오류 발생 시 표시되는 텍스트
• debounce: 디바운스(밀리초)
• searchable검색 기능 활성화/비활성화
• ajax: { url: '', method: 'GET', dataKey: 'results', queryParam: 'q' }
• initialSelected: { id: '', name: '' } veya [{ id: '', name: '' }]

5.  IO Select 인스턴스를 삭제하고 원래의 select로 되돌립니다.

- 작동 화면