ComboTree - AutoComplete

[amir-t]

Hi, Is there a way to implement ComboTree  so that you can do autocomplete?

Maybe by filtering the auto complete in that way that by a defined separator (in the search text box of the combo) will define a tree's depth separation, which will implement a autoComplete search for every node in the tree at any level?

Thanks in advance.

[stworthy]

You have to achieve this functionality by yourself. The code below can be extended to do searching on a combotree component.

Code:

$.fn.combotree.defaults.editable = true;
$.extend($.fn.combotree.defaults.keyHandler,{
	enter:function(){  called when press enter key
		console.log('enter')
	},
	query:function(q){  called when enter something in textbox
		console.log(q);
	}
});

[amir-t]

Thanks.

But how will i be able to filter the data at the comboTree?
Do i need to change (remove the unmatched nodes) of the existed data list on the query or enter callbacks?

Its important to mention that i need to filter the displayed data but still keeping the original data list which received and assigned as the tree data of the combo,
but still didn't find how to filter the data at the query or enter callbacks (of the keyhandler property).

I'll appreciate if you can post some basic example for autoComplete extension for comboTree component?
Because there is still filtering complication, because the data here is not a simple list of values, but hierarchical data.

[stworthy]

Please try the simple example. It need to be extended to fit your requirements.

Code:

(function(){
	$.fn.combotree.defaults.editable = true;
	$.extend($.fn.combotree.defaults.keyHandler,{
		up:function(){
			console.log('up')
		},
		down:function(){
			console.log('down')
		},
		enter:function(){
			console.log('enter')
		},
		query:function(q){
			var t = $(this).combotree('tree');
			var nodes = t.tree('getChildren');
			for(var i=0; i<nodes.length; i++){
				var node = nodes[i];
				if (node.text.indexOf(q) >= 0){
					$(node.target).show();
				} else {
					$(node.target).hide();
				}
			}
			var opts = $(this).combotree('options');
			if (!opts.hasSetEvents){
				opts.hasSetEvents = true;
				var onShowPanel = opts.onShowPanel;
				opts.onShowPanel = function(){
					var nodes = t.tree('getChildren');
					for(var i=0; i<nodes.length; i++){
						$(nodes[i].target).show();
					}
					onShowPanel.call(this);
				}
				$(this).combo('options').onShowPanel = opts.onShowPanel;
			}
		}
	});
})(jQuery);

[amir-t]

Tnx a lot, looks very helpful, i'll try to use it now.

Another important manners:
1. I see on the query callback, that the search is iterating just over the children nodes
and not the entire tree nodes, how can i make an entire tree query search?

2. Is there a way that the matched nodes (from the entire tree data) which returned from the autoComplete search,
will be displayed in the comboTree, as a list of values (and not as treeView display but just as flat list, only when using autoComplete filtering) ?

Where the original hierarchical tree data won't be changed, but its display view on the comboTree, will be presented as list of matches and not as the regular treeView?

Regards.