Multiple selection with filter

Question

In the old days, we might have used a multiselect picklist to move items from a collection of "all items" to a collection of "selected items".

Nowadays, the more contemporary pattern is to use a multiselect dropdown that displays all items, with chips that show selected items.

I am working on a step in a stepper that allows users to select certain contacts from a list of all available contacts.

The requirements are as follows:

1. Users need to see four columns of information and potentially hundreds of rows
2. Users shouldn't need to remember the names of everyone they want to select, which is why we've opted to show a gridview to allow browsing
3. Users should be able to select a large number of contacts in this step
4. Users should still be able to find specific individuals if they know the name, and select them...
5. But the feedback I received in my design was that just providing the number of contacts selected, when some of them are on non-visible pages in the pager, is not ideal. (I agree with this.)
6. Because this is a step in a stepper, everything should be contained to the step.

Given all this, it's feeling like there's too much information to fit into a picklist or a dropdown.

We've been thinking about using two gridviews - all contacts and selected contacts - but that can be messy when there are a large number of rows in each gridview.

What's a better way for the user to know which contacts they've selected, while still being able to flexibly find and add more contacts?

Answer 1

Can you add chips with delete option below the search field and above the table? And then remove auto suggestion in dropdown, and leave table results instantly update onChange in the search input field.

Ofcourse rows that are already selected, if they are searched - should be signalized also active that as it is now. You can even switch from table row and checkboxes, to some version of toggable boxes where whole box could be clickable. If you want to avoid "pager", Load more button could be worth trying. You should clearly mark how contacts are sorted (i.e. Alphabetical)