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