Filtering tags in component touch UI dialog

[sreenivasula]

Hi All,

we have a component developed using sightly and touch UI dialog. In the dialog, we have a tags selection drop down with below code.

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/autocomplete"
    class="cq-dialog-tags-enabledisable"
    mode="contains"
    fieldLabel="Include Tags"
    multiple="{Boolean}true"
    name="./abc:tagName">
    <values
        jcr:primaryType="nt:unstructured"
        sling:resourceType="cq/gui/components/common/autocomplete/taggingtags"/>
    <options
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/form/autocomplete/list"
        src="/libs/cq/gui/content/common/tags.html{?query,start,end}"/>
</jcr:root>

The drop down auto complete functionality is working as expected and displaying all matching tags based on the search string for selection.

Our Requirement:- When we search for a tag, it should only display first level tags for selection not second/child level. (For example, in the attached screen shot under Projects, we have WCM as first level tag and Email,Landing Page and Launch are as second level (or child level) tags). So when i search for WCM(first level), it should display WCM for selection, but when i search for Email or Launch(second level), it should not display any tag for selection.

Please help me, how i can achieve the above requirement.

Thanks in advance.