Component Proposal: Tokenised Input Field For Filtering

[felix-gohla]

Hi all,

in this discussion, I want to propose a new component.

Use case / Description of the new component

Imagine a website with a lot of filterable entities, we are looking for a intuitive filtering method.

For this, we thought of a text based input that is able to contextually aware present you with options you can filter for.
Based on what you're currently entering, other options will show and you can use operations to combine those selections.

• Focusing the field brings up a context menu
• The context menu changes based on what the current input is (a little like q-select but aware of the context).
• By that, groups of tokens can be built that combine e.g. into a larger filter (e.g. filtering for Author + is + some name would be one group).

Demo

I built a very simple proof of concept for filtering some Todos. The field could look a little like this:

token-field-poc.mp4

The code for the PoC is available here: https://github.com/giz-berlin/quasar-token-field-poc
By no means, this is perfect or complete as there are still a lot of things to consider.

I split this into two components:

• The TokenField which just displays groups of tokens.
• The FilterTokenField which uses the TokenField and implements logic in order to provide the context aware menu.

Why we think this would be a good idea

• This filtering method is pretty fast, especially because you can completely use it via keyboard only (mouse is also possible).
• You can have complex filtering rules if necessary.

What still is conceptually unclear

• Is filtering the only use case or are there more?
• When there are more, can we even generalise the use cases or are they just too special to provide an API for that?
• What is the limit for usability? When does a filter get "too crowded" or confusing?

[felix-gohla]

There seems to be no resonance with this feature. Closing.