2

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).

Tree diagram

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?

1

The most obvious way I can think of would be using an accordion tree view. Like below:

Expand/Collapse Tree View

Other examples of what I'm referring to can be found here:

http://www.jqueryscript.net/tags.php?/tree%20view/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.