jstree Example - Simple
HTML
<script src="http://static.jstree.com/3.0.0-beta3/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="http://static.jstree.com/3.0.0-beta3/assets/dist/themes/default/style.min.css">
<div>
<input class="search-input form-control"></input>
</div>
<div id="jstree">
</div>
JavaScript
$(function() {
$(".search-input").keyup(function() {
var searchString = $(this).val();
console.log(searchString);
$('#jstree').jstree('search', searchString);
});
$('#jstree').jstree({
'core': {
'data': [{
"id": "1.0",
"text": "Fresh Products",
"icon": "",
"state": {
"opened": false,
"disabled": false,
"selected": false
},
"children": [{
"id": "2.06.0",
"text": "Ethnic & Specialty",
"icon": "",
"state": {
"opened": false,
"disabled": false,
"selected": false
},
"children": false,
"liAttributes": null,
"aAttributes": null
}, {
"id": "2.07.0",
"text": "Natural & Organic",
"icon": "",
"state": {
"opened": false,
"disabled": false,
"selected": false
},
"children": false,
"liAttributes": null,
"aAttributes": null
}, {
"id": "2.08.0",
"text": "Prepared Foods",
"icon": "",
"state": {
"opened": false,
"disabled": false,
"selected": false
},
"children": false,
"liAttributes": null,
"aAttributes": null
}, {
"id": "2.09.0",
"text": "Seafood",
"icon": "",
...