Mondis Auto-Complete Tree component

Note: Tree data in this demo are loaded from global variable instead of a remote server.

Angular app demo

Note: ng-init should be in controller, but there is no controller.

=

Static demo using attributes only

Please note the apostrofes.

Dynamic demo using jQuery

[ ; ]

Remote control of dynamic widgets

Please note position of the popup is set to position of the link.

Show popup of the first widget | Hide

Lorem ipsum dolor sit amet,…

…, consectetur adipiscing elit. Morbi sed sem ornare, tincidunt nibh ac, vestibulum ipsum. Sed libero tellus, accumsan eu placerat nec, cursus rutrum mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut viverra quis sapien sed scelerisque. Nam vel sapien pharetra, maximus nisi in, condimentum augue. Nunc lobortis nulla at sagittis rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus porttitor velit nec bibendum. Mauris tristique nisi justo, vitae tristique enim luctus eu. Nam id tempor nulla. Vestibulum eu lectus rutrum, suscipit felis nec, posuere magna. In non leo eros. Morbi malesuada enim vitae nisi auctor sagittis. Vestibulum tempor non felis a pellentesque. Vivamus bibendum quam vitae nibh congue vehicula. In hac habitasse platea dictumst.

Vestibulum volutpat tempus porta. Suspendisse potenti. Nam interdum fermentum consequat. Quisque et venenatis quam. Sed fermentum in massa nec facilisis. Duis dignissim bibendum tellus, ut sodales felis vestibulum et. Maecenas quis ligula non velit cursus consequat. Quisque non lorem est.

Donec nibh erat, pharetra et condimentum id, tristique ac dui. Aliquam erat volutpat. Ut sed tempus sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut et justo eu neque condimentum imperdiet. Integer eu libero consectetur, fringilla turpis quis, maximus ex. Sed nec augue sit amet ante lacinia ultrices. Nullam molestie leo sed porta iaculis. Nam interdum vitae lacus sit amet condimentum.

Nulla eleifend arcu nisl, eu sollicitudin magna elementum et. Praesent vitae nibh lectus. Phasellus et nisl eleifend, feugiat justo sed, accumsan arcu. Pellentesque sed convallis metus. Donec consectetur nibh a massa sagittis eleifend. Donec congue libero sit amet fermentum dignissim. Maecenas ut dui commodo, rhoncus nisl ut, varius dolor. Morbi elit erat, scelerisque eu odio eget, accumsan rhoncus ex.

Quisque varius eros id lobortis rutrum. Morbi porttitor elementum purus a posuere. Aliquam egestas pretium velit, at lobortis arcu consectetur vel. Ut finibus dictum scelerisque. Nulla sit amet dapibus sem. Sed iaculis ultricies scelerisque. Etiam odio lacus, blandit at erat ac, porta euismod risus. Fusce ultrices dignissim quam et condimentum. Aliquam vel lectus sit amet ante mollis ultricies. Duis tincidunt libero ut ex laoreet, lacinia elementum justo porttitor. Morbi scelerisque pellentesque enim malesuada lacinia. Curabitur ac neque sit amet purus congue vestibulum egestas quis quam. In hac habitasse platea dictumst. Etiam consequat at diam ac imperdiet.

Aliquam ac nisi malesuada, sodales purus in, sagittis ex. Vivamus rutrum molestie justo, quis porta sapien laoreet in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed aliquet mi non leo convallis gravida. Cras id turpis mauris. Maecenas ac sagittis neque, nec pulvinar ipsum. Etiam imperdiet lobortis leo, vitae scelerisque mauris cursus sit amet. Proin dictum rhoncus turpis, non porttitor diam suscipit ut.

Fusce at lacus fermentum, finibus mi nec, consequat urna. Integer id ligula rhoncus, vestibulum eros in, ullamcorper nisl. Duis vel finibus sapien, non rutrum purus. Nunc blandit mauris et elit iaculis, a tempor justo congue. Duis ac pharetra sem. Nulla nisl tellus, consequat ac tincidunt malesuada, vulputate a leo. Nunc ac leo venenatis, porttitor ante eu, convallis augue. Phasellus non imperdiet velit. Morbi et urna ac justo porttitor ultrices nec eu lacus. Sed tempus ante libero, vel posuere dui fermentum et.

Etiam in sodales ligula. Mauris et pulvinar sapien. Integer varius elementum felis vel pellentesque. Quisque faucibus, turpis at bibendum sodales, turpis metus sollicitudin nisl, sit amet rutrum augue diam in nunc. In et nunc nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed quis vestibulum tellus. Phasellus eget sollicitudin felis. Vestibulum ultricies ac metus ut fermentum. Cras feugiat est quis odio varius, ac consequat risus finibus. Donec nec lorem tincidunt, ullamcorper nulla at, tempor purus. Suspendisse potenti. Proin nec pretium metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Nunc lacinia, tortor nec sagittis pellentesque, turpis orci vehicula tellus, ut pulvinar lorem dui sed quam. Sed posuere dapibus rutrum. In ornare consequat gravida. Maecenas orci massa, dictum ut congue non, sagittis sed felis. Nullam molestie sed nulla sed facilisis. Integer pharetra justo nec quam faucibus, tincidunt rutrum justo condimentum. Fusce vitae ultricies massa, eget sollicitudin felis. Nam pretium aliquam elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque nec eros varius, venenatis neque at, auctor nisl. Maecenas ac ornare turpis, a laoreet tortor. Duis at semper ipsum, sed ultrices nulla.

Sed molestie facilisis erat. Ut quis dui ornare, dignissim ante sed, tempus diam. Aliquam erat volutpat. Fusce accumsan erat sit amet ullamcorper maximus. Donec sit amet lacus nunc. Nulla sit amet quam imperdiet, iaculis risus sed, lacinia diam. Fusce eget faucibus lacus, sit amet commodo ante. Maecenas leo risus, tincidunt eget tempor vel, aliquet eu lorem. Phasellus varius leo id massa eleifend laoreet. Maecenas felis nisl, posuere nec risus vel, consequat semper dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam ornare porta odio, nec fermentum lorem sollicitudin at. Integer volutpat auctor accumsan. Curabitur aliquet nisi vel tempus molestie.

Etiam eu dolor sit amet mi molestie fringilla. Nulla luctus ut augue ac varius. In justo lectus, posuere quis neque a, finibus tincidunt ligula. Aliquam a ultricies lacus. Pellentesque varius, metus nec fringilla venenatis, justo ante sagittis lacus, accumsan commodo odio eros vel sem. Sed id sollicitudin nunc. Quisque sit amet sagittis ligula. Maecenas bibendum tincidunt purus ac congue. Maecenas at neque in tellus tincidunt euismod. Vestibulum mi diam, venenatis sed lectus id, vestibulum viverra arcu. Sed viverra eget mi vitae sagittis. Ut egestas nisl a lacinia tempus.

Ut gravida augue et nisi vestibulum tempor vitae in ipsum. Proin risus massa, ultricies et gravida ac, elementum sed elit. Phasellus vehicula lacus in tincidunt dictum. Ut fringilla at enim at dapibus. Cras quis convallis est. Aenean iaculis, ante sed porta sodales, ligula arcu fermentum sapien, eu scelerisque eros dui ut elit. Sed malesuada risus quis est varius, ut dignissim lectus pharetra.

Nunc nibh lorem, bibendum non eros porttitor, placerat facilisis neque. Duis tincidunt felis eu ullamcorper laoreet. Praesent vel efficitur ipsum. Aliquam scelerisque purus vitae blandit pellentesque. Praesent non ante placerat, consectetur urna in, maximus lacus. Proin mattis libero et lacus malesuada, vel semper sem accumsan. Suspendisse luctus facilisis nulla, a rutrum felis posuere sed. Mauris egestas elit justo, et euismod mi laoreet sit amet. Nullam fringilla eros quis luctus sollicitudin. Integer eget ipsum vitae turpis dapibus vehicula eu eget nunc. Etiam mattis mauris porttitor, scelerisque justo lobortis, cursus ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan aliquam tortor, eget euismod ipsum tincidunt pellentesque.

Sed aliquam rhoncus pulvinar. Proin dapibus leo ac libero volutpat, viverra commodo felis gravida. Morbi fringilla venenatis condimentum. Sed eget sem volutpat, hendrerit neque id, suscipit lacus. Curabitur nulla sem, dapibus vel condimentum at, tempor a sapien. Curabitur efficitur convallis sem eu semper. Vivamus nec nibh semper, vulputate quam vulputate, fringilla sem. Fusce id commodo enim, eget sagittis augue. Vestibulum vestibulum arcu id auctor porta. Praesent vitae felis eget enim iaculis maximus sit amet a mi. Donec aliquet et nibh id tincidunt. Duis et ullamcorper lacus. Praesent luctus nisi quis sodales pulvinar.

Nullam rhoncus justo iaculis, dictum lacus sed, convallis augue. Proin pretium mattis tortor id bibendum. Praesent nibh metus, dictum ut massa a, finibus posuere justo. Quisque dignissim est felis, quis vulputate justo efficitur sed. In rhoncus nisi lorem, at lobortis orci venenatis eget. Fusce orci erat, vulputate ut ante eget, fringilla viverra neque. Proin eu gravida eros. Praesent luctus cursus sem ut viverra. Fusce accumsan urna sed est congue, id interdum justo cursus. Praesent eleifend orci vitae nibh condimentum, sit amet porta nisl sodales.