I would like to implement comobobox with a search filter for phones, larger screens and tablets. The examples below show how I think it should behave for phones and larger screens. I'm still fomenting doubt about the tablet.
Phone
For the phone my idea is let the user type and trigger the display when he/she hits "Go". The idea behind this is to not throw an overlay without an explicit button hit. Any thoughts?
A concern: The combobox does not look like a combobox at all. But it still seems right to me because of the search field requirement. Thoughts?
Larger screens: On a larger screen seems pretty straight forward.
The user clicks the combobox than the selection panel within the input search filter appears. It works just like a combobox.
Tablets 3. What would be the best approach for tablets. I think that it is standard that tablets on portrait mode to behave just as phones, but on the landscape mode I don't know what to do. An overlay that occupies the whole screen seems awkward to me, and the desktop version of it also seems to not to fit.
Any help is highly appreciated. Thanks.
Edit: 4. Multi-selection is a requirement. Ideally this will be a parameter of the component(i.e multi-select="on|off").
Data will be pulled from the server every time the filter is updated. I can expect at least 0-5000 responses from the server, depending on the string the user types as a filter.
Custom options are not specified on the screenshots but is definitely going to happen. Instead of just a plain single line of test, I was willing to give more informative content such as image, name and an unique identifier.
<select>
/<option>
?