diff options
Diffstat (limited to 'docs/_posts/2016-12-06-v2.0-multi-select.md')
| -rw-r--r-- | docs/_posts/2016-12-06-v2.0-multi-select.md | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/docs/_posts/2016-12-06-v2.0-multi-select.md b/docs/_posts/2016-12-06-v2.0-multi-select.md new file mode 100644 index 000000000..aaa5c9fa9 --- /dev/null +++ b/docs/_posts/2016-12-06-v2.0-multi-select.md @@ -0,0 +1,46 @@ +--- +layout: post +title: Version 2.0 – Multi-select dropdown jQuery plugin +author: zarino +--- + +There are several types of 'list page' on FixMyStreet: for example, when you +view all reports from a specific body, or when you log into your account to see +reports you have made. + +For quite a while now, users have been able to filter these by state (eg +'fixed' or 'in progress') or category (eg 'pothole', 'streetlight', etc), but a +recent suggestion from Oxfordshire County Council prompted us to look again at +this functionality and improve it. + +So now it's simple to filter by multiple states or categories: want to see all +unfixed potholes? All streetlights or flytipping reports that are fixed? No +problem. + +HTML's `<select multiple>` is not the nicest tool in the box, especially when +it comes to actually selecting multiple options. It usually involves holding +down a key, but that key is different depending upon your operating system. + +So I looked at existing JavaScript plugins and finding nothing suitable created +a very simple jQuery plugin which is available at +[https://github.com/mysociety/jquery-multi-select](https://github.com/mysociety/jquery-multi-select). + +By default, it converts a multiple select into a dropdown with checkboxes: + +<img src="/assets/posts/multi-select-people.png" alt=""> + +The options can be wrapped within a container to stop the dropdown overlapping other content: + +<img src="/assets/posts/multi-select-line-wrap.png" alt=""> + +With options in the constructor, you can specify text for when all/no options +are selected, and specify groups of options as presets that will be listed at +the top of the dropdown: + +<img src="/assets/posts/multi-select-groups.png" alt=""> + +On FixMyStreet, we have used this for both the state and category filters on list pages: + +<img src="/assets/posts/multi-select.png" alt=""> + +Let us know if you find the plugin useful! |