Updated search method to optionally reveal results. #65

- New option `{revealResults: true|false}`, true by default
- Updated revealNode to accept an array of nodes.
- Updated searchable tree example

README.md

@@ -494,8 +494,9 @@ Returns an array of matching nodes.
 
 ```javascript
 $('#tree').treeview('search', [ 'Parent', {
-  ignoreCase: true,
-  exactMatch: false
+  ignoreCase: true,     // case insensitive
+  exactMatch: false,    // like or equals
+  revealResults: false, // reveal matching nodes
 }]);
 ```
 

public/index.html

@@ -85,6 +85,12 @@ <h2>Input</h2>
                 Exact Match
               </label>
             </div>
+            <div class="checkbox">
+              <label>
+                <input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
+                Reveal Results
+              </label>
+            </div>
             <button type="button" class="btn btn-success" id="btn-search">Search</button>
             <button type="button" class="btn btn-default" id="btn-clear-search">Clear</button>
           <!-- </form> -->
@@ -421,7 +427,7 @@ <h2></h2>
           enableLinks: true,
           data: defaultData
         });
-        
+
 
 
         var $searchableTree = $('#treeview-searchable').treeview({
@@ -432,7 +438,8 @@ <h2></h2>
           var pattern = $('#input-search').val();
           var options = {
             ignoreCase: $('#chk-ignore-case').is(':checked'),
-            exactMatch: $('#chk-exact-match').is(':checked')
+            exactMatch: $('#chk-exact-match').is(':checked'),
+            revealResults: $('#chk-reveal-results').is(':checked')
           };
           var results = $searchableTree.treeview('search', [ pattern, options ]);
 

public/js/bootstrap-treeview.js

@@ -70,7 +70,8 @@
 
 	_default.searchOptions = {
 		ignoreCase: true,
-		exactMatch: false
+		exactMatch: false,
+		revealResults: true
 	};
 
 	var Tree = function (element, options) {
@@ -739,17 +740,26 @@
 
 	/**
 		Reveals a given tree node, expanding the tree from node to root.
-		@param {Object|Number} identifier - A valid node or node id
+		@param {Object|Number|Array} identifier - A valid node, node id or array of node identifiers
 		@param {optional Object} options
 	*/
 	Tree.prototype.revealNode = function (identifier, options) {
 		options = $.extend({}, _default.options, options);
 
-		var parentNode = this.getParent(identifier);
-		while (parentNode) {
-			this.setExpandedState(parentNode, true, options);
-			parentNode = this.getParent(parentNode);
-		};
+		if (!(identifier instanceof Array)) {
+			identifier = [identifier];
+		}
+
+		// Iterate nodes
+		$.each(identifier, $.proxy(function (index, identifier) {
+
+			// Traverse the tree expanding parents from node to root
+			var parentNode = this.getParent(identifier);
+			while (parentNode) {
+				this.setExpandedState(parentNode, true, options);
+				parentNode = this.getParent(parentNode);
+			};
+		}, this));
 
 		this.render();
 	};
@@ -795,11 +805,22 @@
 			}
 
 			results = this.findNodes(pattern, modifier);
+
+			// Add searchResult property to all matching nodes
+			// This will be used to apply custom styles
+			// and when identifying result to be cleared
 			$.each(results, function (index, node) {
 				node.searchResult = true;
 			})
 
-			this.render();
+			// If revealResults, then render is triggered from revealNode
+			// otherwise we just call render.
+			if (options.revealResults) {
+				this.revealNode(results);
+			}
+			else {
+				this.render();
+			}
 		}
 
 		this.$element.trigger('searchComplete', $.extend(true, {}, results));

src/js/bootstrap-treeview.js

@@ -70,7 +70,8 @@
 
 	_default.searchOptions = {
 		ignoreCase: true,
-		exactMatch: false
+		exactMatch: false,
+		revealResults: true
 	};
 
 	var Tree = function (element, options) {
@@ -739,17 +740,26 @@
 
 	/**
 		Reveals a given tree node, expanding the tree from node to root.
-		@param {Object|Number} identifier - A valid node or node id
+		@param {Object|Number|Array} identifier - A valid node, node id or array of node identifiers
 		@param {optional Object} options
 	*/
 	Tree.prototype.revealNode = function (identifier, options) {
 		options = $.extend({}, _default.options, options);
 
-		var parentNode = this.getParent(identifier);
-		while (parentNode) {
-			this.setExpandedState(parentNode, true, options);
-			parentNode = this.getParent(parentNode);
-		};
+		if (!(identifier instanceof Array)) {
+			identifier = [identifier];
+		}
+
+		// Iterate nodes
+		$.each(identifier, $.proxy(function (index, identifier) {
+
+			// Traverse the tree expanding parents from node to root
+			var parentNode = this.getParent(identifier);
+			while (parentNode) {
+				this.setExpandedState(parentNode, true, options);
+				parentNode = this.getParent(parentNode);
+			};
+		}, this));
 
 		this.render();
 	};
@@ -795,11 +805,22 @@
 			}
 
 			results = this.findNodes(pattern, modifier);
+
+			// Add searchResult property to all matching nodes
+			// This will be used to apply custom styles
+			// and when identifying result to be cleared
 			$.each(results, function (index, node) {
 				node.searchResult = true;
 			})
 
-			this.render();
+			// If revealResults, then render is triggered from revealNode
+			// otherwise we just call render.
+			if (options.revealResults) {
+				this.revealNode(results);
+			}
+			else {
+				this.render();
+			}
 		}
 
 		this.$element.trigger('searchComplete', $.extend(true, {}, results));

tests/lib/bootstrap-treeview.js

@@ -70,7 +70,8 @@
 
 	_default.searchOptions = {
 		ignoreCase: true,
-		exactMatch: false
+		exactMatch: false,
+		revealResults: true
 	};
 
 	var Tree = function (element, options) {
@@ -739,17 +740,26 @@
 
 	/**
 		Reveals a given tree node, expanding the tree from node to root.
-		@param {Object|Number} identifier - A valid node or node id
+		@param {Object|Number|Array} identifier - A valid node, node id or array of node identifiers
 		@param {optional Object} options
 	*/
 	Tree.prototype.revealNode = function (identifier, options) {
 		options = $.extend({}, _default.options, options);
 
-		var parentNode = this.getParent(identifier);
-		while (parentNode) {
-			this.setExpandedState(parentNode, true, options);
-			parentNode = this.getParent(parentNode);
-		};
+		if (!(identifier instanceof Array)) {
+			identifier = [identifier];
+		}
+
+		// Iterate nodes
+		$.each(identifier, $.proxy(function (index, identifier) {
+
+			// Traverse the tree expanding parents from node to root
+			var parentNode = this.getParent(identifier);
+			while (parentNode) {
+				this.setExpandedState(parentNode, true, options);
+				parentNode = this.getParent(parentNode);
+			};
+		}, this));
 
 		this.render();
 	};
@@ -795,11 +805,22 @@
 			}
 
 			results = this.findNodes(pattern, modifier);
+
+			// Add searchResult property to all matching nodes
+			// This will be used to apply custom styles
+			// and when identifying result to be cleared
 			$.each(results, function (index, node) {
 				node.searchResult = true;
 			})
 
-			this.render();
+			// If revealResults, then render is triggered from revealNode
+			// otherwise we just call render.
+			if (options.revealResults) {
+				this.revealNode(results);
+			}
+			else {
+				this.render();
+			}
 		}
 
 		this.$element.trigger('searchComplete', $.extend(true, {}, results));