Finding jstree nodes using jquery javascript

Question

I am using jstree plugin to build my tree. I have a search box on my webpage where I need users to search jstree nodes.

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

When you click search, the jstree nodes must be expanded, and if they are found, the nodes must be highlighted. If not found, and the error should be displayed to users as "not found". My code is to expand all the nodes below. Is there an easy way to search all 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 are [...] null or not objects. This is a jstree error. any ideas?

Answer 1

I 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 was highlighted using my button:

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