JSF or PrimeFaces searcheable treeview control

Question

Is there a JSF or PrimeFaces control which is a "searchable" treeview? I am thinking similar to the Eclipse "options", where you type in some text into a searchbox and the treeview autoupdates itself.

I know I can do this very easily with some jQuery, but the dictum from on high is no in-line JS / jQuery. We must use all JSF. Does anyone have any ideas?

Answer 1

There is no build-in mechanism for this in PrimeFaces currently, but the tree component is dynamically build based on Java Bean output. So the possible solution would be:

1) Create p:inputText with p:ajax listener informing the bean about filter change

2) Rebuild the TreeNode according to filter

3) Update the tree component

However, I would recommend not calling the bean method immediately after key press, but using referrable timeout:

var filterTimeout;
var filterEvent = function() {
    if (filterTimeout) {
        clearTimeout(filterTimeout);
    }
    filterTimeout = setTimeout(function(){
        doFilterOnServer();
        filterTimeout = null;
    }, 300);
};
$('[id$=\\:myTree]').find('input').keyup(filterEvent);