Ajax Search for JSTree 3.0.0 - Not Expanding Nodes for "Deep" Finds

[Winston DelGato]

I have a dataset that contains 4 "levels" of data.  I am dynamically (ajax) loading the tree data as nodes are opened.  I have also set up ajax search.  My problem is that if the search returns a node that is too deep (not yet expanded), it does not open the parent nodes appropriately.  Is there some logic I need to provide in the success section of the call to do this?  I've tried several things to no avail.  I am returning both the "found" nodes from the search and all of their respective parents to the top level.  Code below.  -Winston

 

<script src="/resources/jstree/dist/libs/jquery.js"></script>
<script src="/resources/jstree/dist/jstree.min.js"></script>
<script>
$(function () {
 $('#cc_jstree').jstree({
 'search' : {
  'fuzzy' : false,
  'ajax' : {
   'url' : "/unspsc/cctreesearch",
   'data' : function(str) {
    return { "search_str" : str };
   },
  },
 },
 'plugins' : [ "search", "unique" ],
 'core' : {
     'data' : {
      'url' : function (node) {
       var ccid = node.id.substr(1,8);
       return node.id === '#' ? '/unspsc/cctree/ALL' : '/unspsc/cctree/' + ccid;
      },
      'data' : function (node) {
       return { 'id' : node.id };
      }
     }
 } });
 var to = false;
 $('#cctreesearchBtn').click(function (event) {
  doJstreeSearch();
 });
 $('#cctreesearch').keyup(function (event) {
  var keypressed = event.keyCode || event.which;
  if (keypressed == 13) {
   doJstreeSearch();
  }
 });
 function doJstreeSearch() {
  if (to) {
   clearTimeout(to);
  }
  to = setTimeout(function() {
   var v = $('#cctreesearch').val();
   if (v.length >= 3) {
    $('#cc_jstree').jstree(true).search(v);
   }
  });
 }
});
</script>

 

Initial load calls /unspsc/cctree/ALL returns (abridged info here for space):

 

[{"code":"10000000","description":"10: Live Plant and Animal Material and Accessories and Supplies","parentCode":"ALL","codeType":"Good","root":true,"segmentLevel":true,"segmentLevelCode":"1000000","familyLevelCode":"1000000","classLevelCode":"1000000","commodityLevel":false,"commodityLevelCode":"10000000","familyLevel":false,"classLevel":false},{"code":"11000000","description":"11: Mineral and Textile and Inedible Plant and Animal Materials","parentCode":"ALL","codeType":"Good","root":true,"segmentLevel":true,"segmentLevelCode":"1000000","familyLevelCode":"1100000","classLevelCode":"1100000","commodityLevel":false,"commodityLevelCode":"11000000","familyLevel":false,"classLevel":false},{"code":"12000000","description":"12: Chemicals including Bio Chemicals and Gas Materials","parentCode":"ALL","codeType":"Good","root":true,"segmentLevel":true,"segmentLevelCode":"1000000","familyLevelCode":"1200000","classLevelCode":"1200000","commodityLevel":false,"commodityLevelCode":"12000000","familyLevel":false,"classLevel":false},{"code":"13000000","description":"13: Resin and Rosin and Rubber and Foam and Film and Elastomeric Materials",
...
{"code":"94000000","description":"94: Organizations and Clubs","parentCode":"ALL","codeType":"Service","root":true,"segmentLevel":true,"segmentLevelCode":"9000000","familyLevelCode":"9400000","classLevelCode":"9400000","commodityLevel":false,"commodityLevelCode":"94000000","familyLevel":false,"classLevel":false},{"code":"95000000","description":"95: Land and Buildings and Structures and Thoroughfares","parentCode":"ALL","codeType":"Good","root":true,"segmentLevel":true,"segmentLevelCode":"9000000","familyLevelCode":"9500000","classLevelCode":"9500000","commodityLevel":false,"commodityLevelCode":"95000000","familyLevel":false,"classLevel":false}]

 

Search calls /unspsc/cctreesearch with str parameter and value returns (e.g. /unspsc/cctreesearch?str=pest%20free):

 

[{"id":"#70000000","text":"70: Farming and Fishing and Forestry and Wildlife Contracting Services","parent":"#","state":"selected","children":true},{"id":"#70160000","text":"7016: Wildlife and flora","parent":"#70000000","state":"selected","children":true},{"id":"#70161700","text":"701617: Ecosystems","parent":"#70160000","state":"selected","children":true},{"id":"#70161707","text":"70161707: Conservation and management of animal or bird sanctuaries or pest free environments","parent":"#70161700","state":"selected","children":false}]

 

I would expect that this 4th layer find (and its parents) would be "loaded" and expanded appropriately for view and highlighted as a search result.  If I keep searching over and over, it finally expands (kind of one layer at a time).

 

Thanks!

 

 

 

[Ivan Bozhanov]

Hi,

I believe you switched the data returned from both requests. Anyway:

1) 'data' : function(str) { - search data can not be a function, and you will automatically get an element called 'str' with the search string

2) In the response - return only an array of the IDs of parents that need to be opened - no leaf nodes, and not the matching nodes themselves... You could also make sure all items in the array are unique.

So basically your search.ajax config should omit data entirely.

/unspsc/cctreesearch should return:
["70000000","70160000", ...]

Also - your IDs are not valid - make sure they are valid ID / Name tokens - for example instead of "#700000" use "n700000" (you cannot have "#" in an ID, and it should begin with a letter - according to w3c spec). If you follow my advice, then
/unspsc/cctreesearch should return:
["n70000000","n70160000", ...]

That should be it. Best regards,
Ivan

[Winston DelGato]

Thanks!  I changed the id's to have a prefix of 'n' to accommodate your suggestion.  I also changed the search results to just return the node id.  Examples below.

 

For root (/unspsc/cctree/ALL):

 

[{"id":"n10000000","text":"10: Live Plant and Animal Material and Accessories and Supplies","parent":"#","children":true},{"id":"n11000000","text":"11: Mineral and Textile and Inedible Plant and Animal Materials","parent":"#","children":true},{"id":"n12000000","text":"12: Chemicals including Bio Chemicals and Gas Materials","parent":"#","children":true},

...

{"id":"n94000000","text":"94: Organizations and Clubs","parent":"#","children":true},{"id":"n95000000","text":"95: Land and Buildings and Structures and Thoroughfares","parent":"#","children":true}]

For expanding a node (/unspsc/cctree/n10100000):

 

[{"id":"n10101500","text":"101015: Livestock","parent":"n10100000","children":false},{"id":"n10101600","text":"101016: Birds and fowl","parent":"n10100000","children":false},{"id":"n10101700","text":"101017: Live fish","parent":"n10100000","children":false},{"id":"n10101800","text":"101018: Shellfish and aquatic invertebrates","parent":"n10100000","children":false},{"id":"n10101900","text":"101019: Insects","parent":"n10100000","children":false},{"id":"n10102000","text":"101020: Wild animals","parent":"n10100000","children":false}]

For search results (/unspsc/cctreesearch?str=pest%20free):

[{"id":"n70000000"},{"id":"n70160000"},{"id":"n70161700"},{"id":"n70161707"}]
 
This refactoring seems to be working but has not corrected the search expansion piece.  I do not understand your first point about the search data not being a function.  Would you mind explaining further and/or provide an example (either in my context or just generically) of how it should be configured?  I have tried the following and the search works (but not auto-expansion):

 
 'search' : {
  'fuzzy' : false,
  'ajax' : {
   'url' : "/unspsc/cctreesearch",
   'data' : function(str) {
    return { "search_str" : str };
   },
  },
 },

Alternate configurations for 'data' have been unsuccessful in performing/processing search.  Thanks again.

 

[Winston DelGato]

Got it.  I missed the key part that is it just the id and not a JSON of just the id. 

 

 

This search return works properly (/unspsc/cctreesearch?str=pest%20free):

 

["n70000000","n70160000","n70161700","n70161707"]

This is still being run with the following config, however.