search jstree nodes using jquery javascript

Question

I am using jstree plugin to build my tree. I have a search box in my web page where I need users to be able to search for the jstree nodes.

<fieldset id="search">

    <input type="text" name="search_field" id="search_field" value="" />
    <button id="search_tree">Search</button>

  </fieldset>

When clicked on search, jstree nodes should be expanded and if found the nodes should be highlighted. If not found and error to users should be displayed like "not found". My code to expand all the nodes below. Is there an easy way to search all the nodes in jstree?

<script type="text/javascript"> 
     $(document).ready(function(){

         $("#search_tree").click(function () {  
    var value=document.getElementById("search_field").value; 
         $("#tree").jstree("search",value);  

     });  

     $("#tree").jstree({  



         "xml_data" : {  

             "ajax" : {  

                 "url" : "jstree.xml" 

             },  

             "xsl" : "nest"


         },  
         "themes" : {  

             "theme" : "classic",  

            "dots" : true,  

             "icons" : true 

         },  

             "search" : {  

                 "case_insensitive" : true,  

                 "ajax" : {  

                     "url" : "jstree.xml" 

                 }  

             },  
              "plugins" : ["themes", "xml_data", "ui","types", "search"] 

         });  



 }); 

</script>

I get this error:

Instances[...]is null or not an object. it is a jstree error. any ideas?

Answer 1

I have added this piece of code to my function:

"search" : {  

                 "case_insensitive" : true,  

                 "ajax" : {  

                     "url" : "jstree.xml" 

                 }  

             },  
              "plugins" : ["themes", "xml_data", "ui","types", "search"] 

and

created this function and assoicated with my click button:

function myFunction()
{
$(document).ready(function(){

var value=document.getElementById("search_field").value; 

    $("#search_tree").click(function () { 

        $("#tree").jstree("search",value) 
 }); 

 }); 
}