Lets enhance the last example by adding search functionality. We need a function that will return the matching nodes as an array.
The following function does that for us. Add it to the timeline.
[tabcontent]
[/tabcontent]
<span style="color: #993300;">function</span> isMatch (s, s2) {
<span style="color: #993300;">return</span> s == <span style="color: #000087;">undefined</span> ? <span style="color: #000087;">false</span> : s.<span style="color: #000087;">toLowerCase</span> ().indexOf (s2) != -1;
}
<span style="color: #000087;">_global</span>.searchNodes = <span style="color: #993300;">function</span> (searchString:<span style="color: #993300;">String</span>, x:<span style="color: #000087;">XMLNode</span>, includeNodeName:<span style="color: #993300;">Boolean</span>, includeAttributes:<span style="color: #993300;">Boolean</span>, includeText:<span style="color: #993300;">Boolean</span>, arr) {
<span style="color: #993300;">if</span> (arr == <span style="color: #000087;">undefined</span>) {
arr = [];
searchString = searchString.<span style="color: #000087;">toLowerCase</span> ();
<span style="color: #993300;">if</span> (includeNodeName == <span style="color: #000087;">undefined</span>) {
includeNodeName = <span style="color: #000087;">true</span>;
}
<span style="color: #993300;">if</span> (includeAttributes == <span style="color: #000087;">undefined</span>) {
includeAttributes = <span style="color: #000087;">true</span>;
}
<span style="color: #993300;">if</span> (includeText == <span style="color: #000087;">undefined</span>) {
includeText = <span style="color: #000087;">true</span>;
}
}
<span style="color: #993300;">if</span> (x.nodeType == 1) {
<span style="color: #993300;">if</span> (includeNodeName && isMatch (x.nodeName, searchString)) {
arr.<span style="color: #000087;">push</span> (x);
} <span style="color: #993300;">else</span> <span style="color: #993300;">if</span> (includeAttributes) {
<span style="color: #993300;">for</span> (<span style="color: #993300;">var</span> s <span style="color: #993300;">in</span> x.attributes) {
<span style="color: #993300;">if</span> (isMatch (s, searchString)) {
arr.<span style="color: #000087;">push</span> (x);
<span style="color: #993300;">break</span>;
}
}
}
<span style="color: #993300;">for</span> (<span style="color: #993300;">var</span> i = 0; i < x.childNodes.<span style="color: #000087;">length</span>; i++) {
arguments.<span style="color: #993300;">callee</span> (searchString, x.childNodes[i], includeNodeName, includeAttributes, includeText, arr);
}
} <span style="color: #993300;">else</span> <span style="color: #993300;">if</span> (includeText && isMatch (x.nodeValue, searchString)) {
arr.<span style="color: #000087;">push</span> (x);
}
<span style="color: #993300;">return</span> arr;
};
<span style="color: #993300;">return</span> s == <span style="color: #000087;">undefined</span> ? <span style="color: #000087;">false</span> : s.<span style="color: #000087;">toLowerCase</span> ().indexOf (s2) != -1;
}
<span style="color: #000087;">_global</span>.searchNodes = <span style="color: #993300;">function</span> (searchString:<span style="color: #993300;">String</span>, x:<span style="color: #000087;">XMLNode</span>, includeNodeName:<span style="color: #993300;">Boolean</span>, includeAttributes:<span style="color: #993300;">Boolean</span>, includeText:<span style="color: #993300;">Boolean</span>, arr) {
<span style="color: #993300;">if</span> (arr == <span style="color: #000087;">undefined</span>) {
arr = [];
searchString = searchString.<span style="color: #000087;">toLowerCase</span> ();
<span style="color: #993300;">if</span> (includeNodeName == <span style="color: #000087;">undefined</span>) {
includeNodeName = <span style="color: #000087;">true</span>;
}
<span style="color: #993300;">if</span> (includeAttributes == <span style="color: #000087;">undefined</span>) {
includeAttributes = <span style="color: #000087;">true</span>;
}
<span style="color: #993300;">if</span> (includeText == <span style="color: #000087;">undefined</span>) {
includeText = <span style="color: #000087;">true</span>;
}
}
<span style="color: #993300;">if</span> (x.nodeType == 1) {
<span style="color: #993300;">if</span> (includeNodeName && isMatch (x.nodeName, searchString)) {
arr.<span style="color: #000087;">push</span> (x);
} <span style="color: #993300;">else</span> <span style="color: #993300;">if</span> (includeAttributes) {
<span style="color: #993300;">for</span> (<span style="color: #993300;">var</span> s <span style="color: #993300;">in</span> x.attributes) {
<span style="color: #993300;">if</span> (isMatch (s, searchString)) {
arr.<span style="color: #000087;">push</span> (x);
<span style="color: #993300;">break</span>;
}
}
}
<span style="color: #993300;">for</span> (<span style="color: #993300;">var</span> i = 0; i < x.childNodes.<span style="color: #000087;">length</span>; i++) {
arguments.<span style="color: #993300;">callee</span> (searchString, x.childNodes[i], includeNodeName, includeAttributes, includeText, arr);
}
} <span style="color: #993300;">else</span> <span style="color: #993300;">if</span> (includeText && isMatch (x.nodeValue, searchString)) {
arr.<span style="color: #000087;">push</span> (x);
}
<span style="color: #993300;">return</span> arr;
};
then add the following code to timeline which makes use of the array returned by the above function to one by one highlight the nodes in the tree
[tabcontent]
[/tabcontent]
<span style="color: #993300;">function</span> clearSearch () {
lastKeyword = "";
}
<span style="color: #993300;">var</span> searchArr:<span style="color: #993300;">Array</span> = [], searchIndex:<span style="color: #993300;">Number</span> = 0, lastKeyword:<span style="color: #993300;">String</span>;
<span style="color: #993300;">function</span> treeSearch () {
<span style="color: #993300;">if</span> (find_txt.<span style="color: #000087;">text</span> != lastKeyword) {
lastKeyword = find_txt.<span style="color: #000087;">text</span>;
searchIndex = 0;
searchArr = searchNodes (lastKeyword, tree.dataProvider, names_chk.selected, attrib_chk.selected, text_chk.selected);
}
<span style="color: #993300;">if</span> (searchArr.<span style="color: #000087;">length</span> > 0) {
<span style="color: #878787;">//selected node
</span> <span style="color: #993300;">if</span> (searchIndex >= searchArr.<span style="color: #000087;">length</span>) {
searchIndex = 0;
}
<span style="color: #993300;">var</span> s = searchArr[searchIndex];
<span style="color: #993300;">var</span> p = s.parentNode;
<span style="color: #993300;">while</span> (p != <span style="color: #000087;">undefined</span>) {
tree.<span style="color: #000087;">setIsOpen</span> (p, <span style="color: #000087;">true</span>, <span style="color: #000087;">false</span>);
p = p.parentNode;
}
tree.selectedNode = s;
tree.setFirstVisibleNode (s);
searchIndex++;
result_txt.<span style="color: #000087;">text</span> = "<span style="color: blue;">result </span>" + searchIndex + "<span style="color: blue;"> of </span>" + searchArr.<span style="color: #000087;">length</span>;
} <span style="color: #993300;">else</span> {
result_txt.<span style="color: #000087;">text</span> = "<span style="color: blue;">0 result</span>";
}
}
lastKeyword = "";
}
<span style="color: #993300;">var</span> searchArr:<span style="color: #993300;">Array</span> = [], searchIndex:<span style="color: #993300;">Number</span> = 0, lastKeyword:<span style="color: #993300;">String</span>;
<span style="color: #993300;">function</span> treeSearch () {
<span style="color: #993300;">if</span> (find_txt.<span style="color: #000087;">text</span> != lastKeyword) {
lastKeyword = find_txt.<span style="color: #000087;">text</span>;
searchIndex = 0;
searchArr = searchNodes (lastKeyword, tree.dataProvider, names_chk.selected, attrib_chk.selected, text_chk.selected);
}
<span style="color: #993300;">if</span> (searchArr.<span style="color: #000087;">length</span> > 0) {
<span style="color: #878787;">//selected node
</span> <span style="color: #993300;">if</span> (searchIndex >= searchArr.<span style="color: #000087;">length</span>) {
searchIndex = 0;
}
<span style="color: #993300;">var</span> s = searchArr[searchIndex];
<span style="color: #993300;">var</span> p = s.parentNode;
<span style="color: #993300;">while</span> (p != <span style="color: #000087;">undefined</span>) {
tree.<span style="color: #000087;">setIsOpen</span> (p, <span style="color: #000087;">true</span>, <span style="color: #000087;">false</span>);
p = p.parentNode;
}
tree.selectedNode = s;
tree.setFirstVisibleNode (s);
searchIndex++;
result_txt.<span style="color: #000087;">text</span> = "<span style="color: blue;">result </span>" + searchIndex + "<span style="color: blue;"> of </span>" + searchArr.<span style="color: #000087;">length</span>;
} <span style="color: #993300;">else</span> {
result_txt.<span style="color: #000087;">text</span> = "<span style="color: blue;">0 result</span>";
}
}
on (click) { _parent.treeSearch (); }
When ever the checkboxes are clicked we need to clear the search results and start searching again, so add the following code to all the three check boxes
[tabcontent]
[/tabcontent]
<span style="color: #000087;">on</span> (click) {
<span style="color: #000087;">_parent</span>.clearSearch ();
}
<span style="color: #000087;">_parent</span>.clearSearch ();
}

Leave A Comment