Is there a good treeview control supports ajax searching,filtering?

Question

I have been searching for a javascript treeview control which supports 'on the fly' searching, filtering (similar to auto complete box).

I found ExtJS which has that feature but it's too big (~800 KB js). I also like jquery TreeTable control but I'm not sure it supports that feature.

Please advise. Any suggestion is welcome, thanks a lot.

Answer 1

Go for jstree. Its light and good.

Answer 2

Try http://www.addobject.com/nlstree this is a commercial solution, but the best I have come across. Well documented, quite flexible and has a good overall performance. Its behavior can be easily extended using various events it exposes.

If this one doesn't work for your requirement, better start coding one.

Answer 3

800 KB in a web site or web application is not too much nowadays. Enter Google, type "jquery treeview plugin" (instant search turned on) and you'll download about 250 KB and you didn't even blinked.

I'm not the big fan of Ext JS and I'm amazed of jQuery + jQuery UI + plugins + jQuery tools, etc. But Ext JS TreeView is incredibly useful and ready to be used.

There are lots of possibilities with TreeView (even TreeGrid, which I think is the TreeTable your are looking for).

You can also try to create your own Ext JS treeview bundle (they used to have an Ext JS builder, but it's not available any more) with just required dependencies.

I think the main problem when using Ext JS is when you draw complex interfaces, like: http://dev.sencha.com/deploy/dev/examples/feed-viewer/view.html

http://dev.sencha.com/deploy/dev/examples/desktop/desktop.html

http://dev.sencha.com/deploy/dev/examples/calendar/index.html

But you can try a complex example of TreeView (a TreeGrid) and you'll see it's not too much: http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

Hope this helps

Answer 4

Check out the TreeView component from obout.com. It's ASP.NET, though.

Answer 5

You can take a look at this article 8 Useful JQuery TreeView Examples

Answer 6

I suggest jstree, it does come along with some nice plugins, such as a json plugin to fetch nodes from a server, as well as a search plugin.

It's not a perfect solution for your desired search behavior but you may use this to your advantage:

"The search plugin enables searching for nodes whose title contains a given string, works on async trees too. All found nodes get the jstree-search class applied to their contained a nodes - you can use that class to style search results."

So if you know that all nodes get this class, you could easily hide all nodes beforehand and then let the search plugin add this class which overrides(!important) the display attribute of the css class.