3

So basically, what I'm trying to do here is create an auto-complete text field.

However, from the list of options, there are a number of them we're trying to push for and because of this, we'd like to add a filter (checkbox) above the list of options.

Here's a quick example of what I'm trying to illustrate:

  1. Default:

enter image description here

  1. When checkbox filter is selected:

enter image description here

  1. As user is typing, suggestions will show up based on their query, but checkbox filter will still be shown above the list. (Unable to post last image since I'm told I needed a Reputation 10 to do that).

Do you think this is the most efficient way of adding that filter or does anyone have suggestions?

Note

Improve this question
2
  • Any reason why the checkbox cannot be placed beside the text box?
    – Raiyan
    Feb 5, 2016 at 1:03
  • I actually thought of that, but putting the checkbox outside the textarea made it feel like they're both disconnected from each other - like they were both separate, stand-alone form items. When really one is supposed to filter the other.
    – J Bo
    Feb 5, 2016 at 4:00

2 Answers 2

Reset to default
2

Like JDanniel Pacheco, i think the best solution would be to group the possible options.

But I would go for something like this:

enter image description here

Additionally, you can let the user maybe enter the filter themselves like:

enter image description here

Improve this answer
2
  • Yes, those are great suggestions, thanks! I also thought of JDanniel's solution initially where you just group them. My only concern was if the lists get too long.
    – J Bo
    Feb 5, 2016 at 15:59
  • That's also a great solution, DennisW, thanks. Do you think it's intuitive enough to know that typing a group heading letter would also return results? I guess you'll find out eventually once you fiddle with it, or mistakenly type the beginning letter of the group heading.
    – J Bo
    Feb 5, 2016 at 16:01
0

maybe you can group your items and you filters like:

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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