title: jsTree lazy search
body: <p>Is it possible to have a "lazy search" with JsTree where the search results can be a path that include nodes not currently in the tree? I have a large tree that I am node loading lazily and would like to be able to handle searches that include nodes not currently loaded. </p>
  
  <p>So far the only thing that works for me is using the search callback and replacing all of the data in the tree and refreshing. I was wondering if there was a less hacky way to accomplish this.</p>
  
  <p>The old documentation seems to imply so:</p>
  
  <blockquote>
    <p>"This object can be used to make a request to the server on each
    search - useful if you are using async trees. That way you can return
    an array of IDs that need to be loaded before the actual DOM search is
    performed (so that all the nodes that will match the search are
    loaded). For example if the user searches for "string", you get that
    on the server side, check the database and find out that there is a
    node containing that string. But the node is the child of some other
    node, etc - so in your response you must return the path to the node
    (without the node itself) as ids: ["#root_node","#child_node_3"]. This
    means that jstree will load those two nodes before doing the client
    side search, ensuring that your node will be visible."</p>
  </blockquote>
  
  <p>I tried testing this out with the following code. The search does trigger a url call but jsTree doesn't seem to be using the response or throwing an error if the nodes I return does not exist. I also do not see another query to the server, which presumably would be needed for nodes that don't already exist in the tree:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;body&gt;
  &lt;div id="jstree"&gt;tree goes here&lt;/div&gt;
  &lt;input type="button" class="button" value="Search" id="search" style=""&gt;
  &lt;/body&gt;
  
  &lt;link rel="stylesheet" href="static/dist/themes/default/style.min.css"/&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="static/dist/jstree.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $("#search").click(function () {
          console.log("search");
          $("#jstree").jstree("search", "test");
  
      });
  
      $('#jstree').jstree({
          core: {
              data: {
                  dataType: "json",
                  url: function (node) {
                      console.log(node.id);
                      return node.id === "#" ? "http://127.0.0.1:5000/" : "http://127.0.0.1:5000/";
                  }
              }
          },
          search: {
              case_insensitive: true,
              ajax: {
  
                  url: "http://127.0.0.1:5000/",
                  "data": function (n) {
                      return { id: n.attr ? n.attr("id") : 0 };
  
                  }
  
              }
          },
          plugins: ["json_data", "search"]
      })
      ;
  
  
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The solution at <a href="https://stackoverflow.com/questions/20310156/jstree-asynchronous-search-trigger-load-new-nodes">jsTree asynchronous search - trigger load new nodes</a> doesn't seem to work for me. jsTree doesn't seem to be doing anything with the response from the server. </p>