text search box inside of a jstree?

[gda...@gmail.com]

Hi all, I have implemented jstree with a basic layout.

<div id="mytree">
<ul>
<li class="category"><a href="#">category1</a>
<ul><li class="subcategory"><a href="a">subcategory1</a></li></
ul>
<ul><li class="subcategory"><a href="a">subcategory2</a></li></
ul>
<ul><li class="subcategory"><a href="a">subcategory3</a></li></
ul>
</li>
<li class="category"><a href="#">category2</a>
<ul><li class="subcategory"><a href="a">subcategory1</a></li></
ul>
<ul><li class="subcategory"><a href="a">subcategory2</a></li></
ul>
<ul><li class="subcategory"><a href="a">subcategory3</a></li></
ul>
</li>
</ul>
</div>

And this works wonderfully in jstree with the following configuration:

$('#mytree').jstree({
'core' : {
'animation' : false
},

'themes' : {
'theme' : classic,
'dots' : false,
'icons' : true
},

'types' : {
'valid_children' : [ 'folder' ],
'types' : {
'folder' : {
'valid_children' : [ 'file'],
'max_depth' : 1
},

'file' : {
'valid_children' : [ 'none' ],
'icon' : { 'image' : './images/file.png' },
}
}
},

'plugins' : [
'html_data',
'themes',
'types',
'contextmenu',
'search'
]
});

This is all wrapped in a jQuery UI dialog. Everything works great, the
dialog pops up and all is good. However, I'd like to utilize the
search plugin so someone can enter text into a text box at the very
top of the dialog and have results displayed. This is not working.
jstree seems to be ignoring the input text box so I am not sure how to
shoehorn a text box in here.

Any ideas?
Thanks!
Gary

[mvwd]

A working example of a search-form for jsTree:

/**
* Insert search-form
*/
$('#your-jstree-id').before(
$('<form id="search"><span></span><input type="text" value=""><input
type="submit" value="search"><input type="reset" value="X"></form>').
bind({
reset: function(evt){
$.jstree._focused().clear_search();
$('#search span').html('');
},
submit: function(evt){
var searchvalue = $('#search input[type="text"]').val();
if(searchvalue!='') {
$('#your-jstree-id').jstree('search', searchvalue);
$('#search span').html('');
} else {
//$.jstree._focused().clear_search();
$('#your-jstree-id').jstree('clear_search');
$('#search span').html('Please enter searchvalue');
}
return false;
}
})
);


This will create the search-form dynamically right before the jstree-
container. In your case your jstree-id will be #mytree and has to be
replaced in the example of course.

Good luck.
Markus.