MultiSelect 컨트롤은 체크박스가 있는 매우 간단한 드롭 다운으로 시작하였습니다. 사용자는 하나 이상의 옵션을 선택하고 checkedItems 속성을 사용하여 선택된 항목 목록을 검색 할 수 있었습니다.

let multiselect = new MultiSelect('#theMultiSelect", {  
     itemsSource: countries  
 });

사용자는 마우스로 목록을 스크롤하거나 키보드를 사용하여 빠른 검색을 수행 할 수 있습니다. 스페이스 바를 클릭하거나 눌러 항목을 선택할 수 있습니다. CTRL + A 키를 눌러 모든 항목을 선택하거나 선택 해제할 수도 있습니다.

출시 후 일부 고객은 사용자가 마우스 클릭 한 번으로 모든 항목을 선택하거나 선택 해제할 수 있는 체크박스를 추가하도록 요청하였고, 개발팀은 showSelectAllCheckbox 속성을 추가했습니다.

let multiselect = new MultiSelect('#theMultiSelect", {  
     itemsSource: countries,  
     showSelectAllCheckbox: true  
 });

"모두 선택" 체크박스는 CTRL + A 단축키보다 찾기 쉽기 때문에 컨트롤에 추가되었습니다.

그러나 일부 고객은 추가적인 기능을 원했습니다. 고객들은 긴 아이템 항목을 갖고 있었기 때문에 항목들을 필터링하여 더 작은 옵션 세트에서 선택할 수 있도록 검색/필터 요소를 필요로 했습니다. Excel은 이와 같은 기능을 제공하고 FlexGridFilter 클래스도 이 기능을 제공합니다. 개발팀은 다음과 같이 showFilterInput 속성을 추가 했습니다.

let multiselect = new MultiSelect('#theMultiSelect", {  
     itemsSource: countries,  
     showSelectAllCheckbox: true,  
     showFilterInput: true  
 });

이제 사용자가 검색 창에 입력할 수 있으며 입력한대로 목록이 필터링됩니다. 필터가 변경 될 때 필터링 된 항목을 자동으로 검사해야 하는지 여부를 결정하는 새로운 checkOnFilter 속성도 있습니다.

• MultiSelect 필터링 JavaScript 데모
• MultiSelect 필터링 Angular 데모
• MultiSelect 필터링 React 데모
• MultiSelect 필터링 Vue 데모

최신 버전의 MultiSelect 컨트롤은 처음 추가되었을 때보다 훨씬 강력하고 사용자 친화적입니다. 사용자가 선택 목록을 열 때 나타나는 드롭 다운 컨트롤은 새로운 컨트롤 인 MultiSelectListBox입니다.

MultiSelectListBox 데모를 통해 더욱 자세히 알아볼 수 있습니다.

• MultiSelectListBox JavaScript 데모
• MultiSelectListBox Angular 데모
  
• MultiSelectListBox React 데모
• MultiSelectListBox Vue 데모