4

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

Triggering search Phone combobox overlay

  1. 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?

  2. 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.

Desktop

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").

  1. 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.

  2. 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.

  • 1
    What's wrong with using native <select>/<option>? – bjb568 Dec 17 '14 at 3:32
  • 2
    We need more info here. What are you actually wanting to use here? A 'combobox' is a bit of a generic term. Do you want a select/option list, where a user picks from a limited set of options? Is this a look-ahead filter where people can type in a phrase and filter a huge list and then select? Something else? – DA01 Dec 17 '14 at 4:14
  • Single or multiple selection is an important question as well... – virtualnobi Dec 17 '14 at 8:25
  • I have updated the question to address the points raised in the comments. Thanks guys. – Leandro Dec 17 '14 at 16:33
  • in the tablet sketch, can you explain why selecting 1 or more items in the combobox makes them appear in the search results? if the list of items under the search input isn't search results then what is it? – DaveAlger Dec 18 '14 at 2:49
1

You could do something like this with a multiple selection + filter to search in your list.

example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.