I need to use a searching function for my dynatree and so I found this workaround: JQuery Dynatree - search node by name
However, I need to have it search only up until my expanded node delimiter. (I am using jQuery ui-slider to dynamically set the expand delimiter). Initially, I need it to search until my minExpandedLevel. And if I move the slider, the dynatree should show only matching results in expanded level equivalent to the slider value.
Trying to reset the minExpandLevel and reloading the dynatree just wont do as it returns all(even non-matching) nodes as result.
So I want to add a limit parameter to the search function like:
$(selector).dynatree("getRoot").search(pattern, limit);
Does anybody know how to do this?
Here's my code:
dynatree:
$.ui.dynatree.nodedatadefaults["icon"] = false;
$("#resultTree").dynatree({
minExpandLevel: 4,
persist: false,
classNames: {
vline: "no-bg",
connector: "",
expander: "ui-helper-hidden"
},
children: myJsonData
});
slider:
timeout = false;
searchTerm = $("#searchText").val();
$("#treeslider").slider({
min: minTick,
max: maxTick,
range: "min",
slide: function (event, ui) {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function () {
$("#resultTree").dynatree("getRoot").search(searchTerm, ui.value);
}, 500);
}
});
Okay, I think I found the answer:
I modified the _searchNode function so it will hide matching nodes greater than the level delimiter, but will show parent node(even non-matching) as long as the term matches within its children.
var clear = true;
DynaTreeNode.prototype.search = function (pattern,limit) {
if (typeof limit == "undefined") {
limit = 0;
}
if (pattern.length < 1 && !clear) {
clear = true;
this.visit(function (node) {
node.expand(true);
node.li.hidden = false;
node.expand(false);
});
} else if (pattern.length >= 1) {
clear = false;
this.visit(function (node) {
node.expand(true);
node.li.hidden = false;
});
var searchDepth = 1;
for (var i = 0; i < this.childList.length; i++) {
var hide = { hide: false };
this.childList[i]._searchNode(pattern, hide, searchDepth, limit);
}
}
},
// bottom-up node searching function
DynaTreeNode.prototype._searchNode = function (pattern, hide, searchDepth, limit) {
var level = searchDepth;
if (this.childList) {
// parent node
var hideNode = true;
var searchDepth = level+1;
for (var i = 0; i < this.childList.length; i++) {
var hideChild = { hide: false };
this.childList[i]._searchNode(pattern, hideChild, searchDepth, limit);
hideNode = hideNode && hideChild.hide;
}
if (hideNode && !this._isRightWithPattern(pattern)) {
this._hideNode();
hide.hide = true;
} else {
if (limit && level > limit) {
this._hideNode();
}
hide.hide = false;
}
} else {
// leaf
if (!this._isRightWithPattern(pattern)) {
this._hideNode();
hide.hide = true;
} else {
if (limit && level > limit) {
this._hideNode();
}
hide.hide = false;
}
}
}