Check boxes and search Bar

Question

I have a list with multiple select(checkbox) and also a search feature for it.

Case : On the list appearing, I select two fields in the list and then search for another field. The field I checked earlier now vanishes.

Should I show the user the selected contacts separately or is there a better UX for this problem.

Answer 1

There are basically 3 options (As the user base is not clear from the question, Im not able to select the best one). All 3 options support search + multiselect.

OPTION 1: This type of multi-select works well when the average number of users selected is less. The selected items are shown as chips.

OPTION 2: This type of control can be used when the character length of each item is large. Here, instead of the item itself, the number of items selected is shown.

OPTION 3: And the last one would be the typical grid layout.
i) A 'select' trigger could be given with each item. Once clicked, the item would jump out of the grid to another section.
ii) Checkboxes with each item in the grid.

Answer 2

If you need the checkbox labels to be long (though option 1 is not very usable) I would suggest two options based on what is the desired complexity of the search (over a complex set of metadata or just over a list of strings):

1. using a two column layout as in Storify. Try logging in Storify and creating a story to see what I'm talking about.
2. A ready-to-use duallist widget like this one (highly customizable, also):

https://www.virtuosoft.eu/code/bootstrap-duallistbox/

Recruiters may select a list of candidates by double clicking, or selecting and using the arrow, or bulk selecting on a filtered subset with the double arrow ;)