[Dashboard] Combo Search and Filter pattern

Hi there,

In this cycle, our team is implementing the Combo Search and filter pattern on the Juju Dashboard, where both search and filtering functions could be performed on one bar. The user can pick the filter chips from a menu, or type and submit direct keywords to query the table data.

We would like to share this with you to gather some feedback and comments.
If you are on Zeplin, you can also comment in there: https://zpl.io/2ZQR4yl

Filtering result as a chip added

Clicking on the search bar will activate the pattern, a menu with categories and available filter chips will show. The user can select and de-select chips from the menu, selected ones will be applied as filters and shown in the search bar. The table will be filtered as soon as a filter is applied, no extra submission needed.

Keywords submitted as a chip

When the user starts typing and hit ‘enter’ to submit a keyword chip (e.g. ‘cl’ in the example), the table will be filtered to models containing data with matched characters ‘cl’ from the beginning of the word (e.g. ‘claudio’, ‘clive’ but not ‘accli’).

The filtered table will highlight the matched characters in bold.



Chips Overflow

There will be situations where multiple chips are selected and couldn’t fit into one row in the search box. We designed an ‘expandable indicator’ formated as ‘+2’, when on click the search box will expand and show all chips applied. This is how its look and feel on JAAS dashboard:

We welcome any feedback and questions so we can keep exploring and make sure the user experience on the Juju Dashboard better and better. :blush:

Thank you,
Zihe
(UX designer @ Web&Design)

3 Likes