UI/UX - FilteredSelectMultiple - Filtering the selected options

[Gav O'Connor]

I'm currently looking in to adding a filter to the right hand column of the `filter_horizontal`/`FilteredSelectMultiple` widget to allow users to filter down the list of selected options.

The PR has been created, and is nearly there, but the question has been raised as to whether it's intuitive enough with regards to what happens when filtering the selected values until only a subset are visible, and then saving the form. 

The design of the PR is that the filters are purely for display purposes, and saving the form will send all of the selected options to the server, not just the visible ones.

Without displaying this somehow to the user, this is not clear enough. 

There have been a couple of suggestions as to how to solve this, but wanted opinions from a wider audience as there are probably developers with a lot better UI/UX skills than me.

1. Display some extra info _somewhere_ to indicate something like "X selected options not visible"
2. Display the filtered-out options, but in a muted/greyed-out way.

I'm not overly sold on #2 as this doesn't help the main use case IMO of there being a very long and busy select that you want to filter down to get to the options that you want. 

I do like the idea of #1 though. Maybe a banner at the bottom of the chosen select, either as the text above states, or "Displaying X of Y selected options".

Any concerns, comments or suggestions welcome :D 

Thanks to Carlton and Mariusz for the review and comments too. 

Thanks,

Gav

Issue: #24179 -- FilteredSelectMultiple widget - add filter field to the right column.

https://code.djangoproject.com/ticket/24179

PR: #15926

https://github.com/django/django/pull/15926

[Gav O'Connor]

Mock up of a potential solution. Any thoughts? 

[Jacob Rief]

I'have implemented such a widget in django-formset. It just hides (removes) the selected options which have been filtered out.

Otherwise, filtering by muting options, wouldn't have the desired visual effect.

Please note that in order to implement this feature, I used three <select multiple> elements, two of them visible (the left

and right one) and one hidden, which contains the currently selected options, even if filtered. A nice side-effect of this

architecture is, that it allows autocompletion for long source lists, and in addition, undoing and redoing a selection.

Please check in the link from above the example:

 > Default (or any other CSS framework) > Opinion.

– Jacob

[Gav O'Connor]

Thanks Jacob. 

We have the functionality of the selects working fine, it's just finding a way to make it clear to the user that the selected options that are filtered out are still in fact selected and will be sent as such in the POST. 

Thanks for the info though, I'll take  look. 

[Gav O'Connor]

Another mockup following Carlton's suggestion on the PR

selected.gif