Search bar with multi select dropdown

[shanaka-rajitha]

Features

• When search is performed, should display a dropdown.
• Search function should take place after typing 3 letters minimum, and then display the dropdown.
• Items on dropdown should be selectable.
• Should be able to submit selected data.

Design URL for specs : https://xd.adobe.com/view/809c4f44-9861-4f57-978a-e2d3515a426e-d5cf/

Default search field

Search input with text entered

Search input with selected fields

Search input and submit data button

[mturoci]

@shanaka-rajitha comments on design:

Search input with selected fields

The selection design needs more work. The screenshot depicts multiple rows checked, but only single string Randy is contained within searchbox instead of multiple. Please design the proper textbox selection for multi selection as well.

Also the gap between textbox and dropdown is way too much. See law of proximity.

Search function should take place after typing 3 letters minimum, and then display the dropdown.

What's reasoning for 3 letters minimum? Wouldn't it be better to show results right away so that people don't think it doesn't work?

I would suggest having a look at how Fluent solves these issues and use it as base. Will save both design and development time.

I am also not convinced about checkbox selection. This seems like better suited for ui.table which provides checkbox selection together with search capability. We can provide a flag to render the table columnless + borderless if needed.

[shanaka-rajitha]

Including @mtanco @iamabhishekmathur

[shanaka-rajitha]

I would suggest having a look at how Fluent solves these issues and use it as base. Will save both design and development time.

@sandruparo @shihan007 team can you have a look at this and update the designs accordingly.