Lead: Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
reference: https://demos.telerik.com/kendo-ui/multiselect/index
...
A multi select searchable dropdown allows the user to easily search and select multiple values from a menu list.
Example:
...
Usage &
...
Behaviour
This component is similar to Searchable Dropdown Menu, with the below exceptions.
General guidelines
Structure
...
Select trigger area: includes a search area and chiclets for the selected items
Options list: includes checkboxes to indicate the multiple selection option
Internal Logic
[??????]
Search logic
Search logic is similar to Searchable Dropdown Menu.
Chiclet Behaviour
Selected items will be presented using a chiclet
An item can be removed by either deleting the chiclet or by unchecking the checkbox
Opening the option list after a selection was made
...
All selected items are presented in a “selected” area, placed at the upper area of the options list.
All other items are listed in the area below (do not include selected items)
Selected items:
The list is sorted according to the internal option list sort (if the list is divided to categories - the list will be sorted by the inner sort of the categories).
The number of selected item is presented in parenthesis.
Each new item that will be checked or unchecked will move to the relevant area only in the re-opening of the dropdown
The user may uncheck some items or “clear all”:
The selected items are unchecked. In the next re-opening of the option list, the list will go back to its original structure.
Multiple chiclets
The chiclets area will expand vertically to show all selected items:
When space is a constraint or the user is expected to select many items, the chiclets mechanism should be switched into a cumulative mechanism:
A single chiclet will be presented in the search trigger area.
The chiclet will present the amount of selected items, e.g. “3 selected”.
With each new selection the number in the chiclet will increase by 1.
Click “x” will clear ALL selections.
A search can be perform in the area as explained in this page.
If the label is not indicative enough, the selected item type should be indicated within the chiclet:
States
States are similar to Searchable Dropdown Menu. , except the deferences below:
State | Visual | Comment |
|---|---|---|
Active |  | The dropdown includes checkboxes |
Selected |  | Selections are presented with chiclets |
Disabled |  |
Interaction
...
Step | Visual | Description | Visual - No Selection Exist | ||||
|---|---|---|---|---|---|---|---|
1Regular |  | The Select field displays a hint text | | 2 | In hover: the always displays the current selection | ||
Hover |  | The cursor changes to text cursor | | 3 | |||
Click (anywhere in the dropdown area): |  |
| | ||||
4 | Search- the user starts typing enters a search string: |  |
|  | |||
Select an item-Selection of item |  |
|  | Search and select a second item:
|   | 5 | Once the user clicks anywhere outside the box, the
|
Delete of searched string |  |
| |||||
More than 1 item is selected |  |
| |||||
Click outside the control |  |
If the field is too short to show all chiclets, only the first chiclets will be presented. All selections will be visible:
Clicking anywhere in the dropdown will reopen it (other than clicking the “x”, which will delete the specific chiclet) |   | ||||
6 | Clicking the dropdown with an existing selection:
|  |
Best practices
Click “x” on a chiclet |  |
|
Click on a dropdown with an existing selection (click anywhere other than the “x”s) |  |
|
Clear all selections |  |
|
Best practices
Use when:
The list has 10-50 (TBD) items. If the list has more than 50 (TBD) items, use Dual List Selector instead.
Users know what they are looking for (e.g. when supervisors are looking for their agents in a list). Otherwise a simple scroll through the list will be sufficient.
Don’t use when:
The user doesn’t know what he’s looking for. In this case use regular Drop Down Menu.
Design
<<enter design>>