Improving UX for multi-selectable cards

Question

I'm designing a screen where the user should be able to:
1. Select b/w multiple options (displayed in cards)
2. Search for other cards and be able to select those as well.
Here's a picture for better explanation:

Option to search or select the various options

User selects option 2 from recent options

User now searches for another option and selects it.

His selections are only displayed when he clears his search

I am confused about the user experience part of such an interface.
1. Is this an intuitive UI?
2. There isn't much real estate for me to play with and displaying the same cards in both the search results and separately as a selected option does not seem possible. Are there examples of other sites which do this?
3. What should the ideal multi card search be like

Answer 1

As Muhammad Jahangir already hinted at, using Chips to select multiple results in searches is a very common approach.

If you google "ux search multi select", a lot of the results look like this:

---

Suggestion:

Use something like that:
Doesn't take up that much real estate but still shows enough info to recognize the elements. Use extra elements besides the name to make it easily distinguishable, e.g. I included the color dot as an example.

Answer 2

Some suggestion

1- you can show the tab kind of design view of selected card under the search bar with the tittle eg "option 2" "option 56" instead of showing full card. somethin like this

2- change the search icon into close "cross icon" to cancel/delete the text

3- when user done with the search and selection he/she click the cross icon to close the search and come back to main list/card view . don't need to display the selected card in this case because your selected result will always showing under the search bar in tab view as I mentioned above .

Answer 3

I guess it depends also on the amount of card you will be expecting to have there. If there are a lot of cards, than the search makes sense, but if not, then consider getting rid of the search.

To get back to your question about selection + search, I think after the user select a card you should show how many card it has selected till now without him/her to get to the extra step of deleting the previous input search criteria, maybe something like Distribute (2) a number along with the Distribute button to show you have selected this amount of cards till now.

Also why he/she is not anymore able to see the Recently used option after he come back from a search criteria that he selected? Even if this is being used somewhere in some cool product, I doubt it is intuitive. To show him all the selected product you could think of giving him/her some input to show them?

What do you think? I guess that when I saw a Recently used option and then after I do some searching and select something, I might want to see again Recently used option, and now it's gone and is showing all my selected cards.