I am implementing a hierarchy of tags that a user can associate with certain objects relevant to their situation. The tag names can be duplicated, given the same name tag does not exist under the same parent at the same level.
I want to show the hierarchy to the user using something like an organization chart, meaning each tag would be arranged as a tree (picture below).
As the number of tags grow, all the tags may not be visible at a glance to the user and so I need a search option too. Since I am allowing the duplicate tags, what is the best way to show the search result when the user types the tag name in the text box and I fetch relevant result. Once the user selects a tag from the search, that tag box would be highlighted in some way.
Here is an example. I have a root tag and under it 2 tags A and B, and say under A we have tag C and under B we have D and under that C. Thus we have 2 chains:
- A->C
and
- B->D->C.
Mind that C in both chains is different. Now if user types c, both chains are relevant. So result should somehow convey both these chains but in a decent way and not clutter it. Any suggestions how to best do it?