XML and V2 Tree Example 3: Tree Search.

Posted by on Mar 15, 2005 in Blog, Examples, Flash MX | 0 comments

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.

<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 &amp;&amp; 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 &lt; 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 &amp;&amp; isMatch (x.nodeValue, searchString)) {
                arr.<span style="color: #000087;">push</span> (x);
        }
        <span style="color: #993300;">return</span> arr;
};

Add 1 textInput, 1 button, 3 check boxes, and 1 label component as shown below. Name them find_txt, find_pb, names_chk, attrib_chk, text_chk and result_txt respectively.
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
<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> &gt; 0) {
                <span style="color: #878787;">//selected node
</span>                <span style="color: #993300;">if</span> (searchIndex &gt;= 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>";
        }
}

We need to do to trigger the functions through button click, so add the following code to the find_pb button

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

<span style="color: #000087;">on</span> (click) {
        <span style="color: #000087;">_parent</span>.clearSearch ();
}

You will get the following result 🙂

Leave a Reply