No more expanding of all search results. Search working with large arrays

HISTORY.md

@@ -3,8 +3,13 @@
 https://github.com/josdejong/jsoneditor
 
 
-## not yet released, version 5.15.1
+## not yet released, version 5.16.0
 
+- Better handling of large JSON documents:
+  - Only displays the first 100 items of large arrays, with buttons
+    "show more" and "show all" to render more items.
+  - Search does no longer expand the paths to all matches, instead
+    it only expands the path of the current search result.
 - Fixed index numbers of Array items not being updated after sorting.
 
 

src/js/Node.js

@@ -793,8 +793,7 @@ Node.prototype.insertAfter = function(node, afterNode) {
 
 /**
  * Search in this node
- * The node will be expanded when the text is found one of its childs, else
- * it will be collapsed. Searches are case insensitive.
+ * Searches are case insensitive.
  * @param {String} text
  * @return {Node[]} results  Array with nodes containing the search text
  */
@@ -808,10 +807,10 @@ Node.prototype.search = function(text) {
   delete this.searchValue;
 
   // search in field
-  if (this.field != undefined) {
+  if (this.field !== undefined) {
     var field = String(this.field).toLowerCase();
     index = field.indexOf(search);
-    if (index != -1) {
+    if (index !== -1) {
       this.searchField = true;
       results.push({
         'node': this,
@@ -835,24 +834,13 @@ Node.prototype.search = function(text) {
       });
       results = results.concat(childResults);
     }
-
-    // update dom
-    if (search != undefined) {
-      var recurse = false;
-      if (childResults.length == 0) {
-        this.collapse(recurse);
-      }
-      else {
-        this.expand(recurse);
-      }
-    }
   }
   else {
     // string, auto
-    if (this.value != undefined ) {
+    if (this.value !== undefined ) {
       var value = String(this.value).toLowerCase();
       index = value.indexOf(search);
-      if (index != -1) {
+      if (index !== -1) {
         this.searchValue = true;
         results.push({
           'node': this,
@@ -874,14 +862,21 @@ Node.prototype.search = function(text) {
  * @param {function(boolean)} [callback]
  */
 Node.prototype.scrollTo = function(callback) {
-  if (!this.dom.tr || !this.dom.tr.parentNode) {
-    // if the node is not visible, expand its parents
-    var parent = this.parent;
-    var recurse = false;
-    while (parent) {
-      parent.expand(recurse);
-      parent = parent.parent;
+  // if the node is not visible, expand its parents
+  var node = this;
+  var recurse = false;
+  while (node && node.parent) {
+    // expand max visible childs of the parent if needed
+    var index = node.parent.type === 'array'
+        ? node.index
+        : node.parent.childs.indexOf(node);
+    while (node.parent.maxVisibleChilds < index + 1) {
+      node.parent.maxVisibleChilds += Node.prototype.MAX_VISIBLE_CHILDS;
     }
+
+    // expand the parent itself
+    node.parent.expand(recurse);
+    node = node.parent;
   }
 
   if (this.dom.tr && this.dom.tr.parentNode) {

src/js/SearchBox.js

@@ -226,14 +226,14 @@ SearchBox.prototype._onSearch = function (forceSearch) {
 
   var value = this.dom.search.value;
   var text = (value.length > 0) ? value : undefined;
-  if (text != this.lastText || forceSearch) {
+  if (text !== this.lastText || forceSearch) {
     // only search again when changed
     this.lastText = text;
     this.results = this.editor.search(text);
-    this._setActiveResult(undefined);
+    this._setActiveResult(0, false);
 
     // display search results
-    if (text != undefined) {
+    if (text !== undefined) {
       var resultCount = this.results.length;
       switch (resultCount) {
         case 0: this.dom.results.innerHTML = 'no results'; break;

src/js/showMoreNodeFactory.js

@@ -106,7 +106,7 @@ function showMoreNodeFactory(Node) {
       this.dom.moreText.nodeValue = this._getShowMoreText();
 
       // update left margin
-      this.dom.moreContents.style.marginLeft = (this.getLevel() + 2) * 24 + 'px';
+      this.dom.moreContents.style.marginLeft = (this.getLevel() + 1) * 24 + 'px';
     }
     else {
       if (this.dom.tr && this.dom.tr.parentNode) {