jstree ajax search code example

Example 1: jstree search example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Simple root node" },
                           { "id": "ajson2", "parent": "#", "text": "Root node 2" },
                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
            ];

            createJSTree(jsondata);
        });

        function createJSTree(jsondata) {
            $('#SimpleJSTree').jstree({
                "core": {                    
                    'data': jsondata
                },
                "plugins": ["search"],
                "search": {
                    "case_sensitive": false,
                    "show_only_matches": true
                }
            });
        }

        $(document).ready(function () {
            $(".search-input").keyup(function () {
                var searchString = $(this).val();
                $('#SimpleJSTree').jstree('search', searchString);
            });
        });
        
    </script>
</head>
<body>
    <input id="search-input" class="search-input" />
    <br />
    <div id="SimpleJSTree"></div>
</body>
</html>

Example 2: jstree ajax search

$("#schema").jstree({
   "core": {
                "data": {
                    "url": url,
                    "type": "post",
                    "data": function (node) {
                        return { "ParentId": node.id };
                    }
                }
            },
   "search": {
                "case_insensitive": true,
                "show_only_matches": true,
                "show_only_matches_children": true,
                ajax: {
                    "url": url,
                    "type": "post",
                    "data": {"yourdata": showtableonly  }
                }
            },
            "plugins": ["search"], 
            });
//Example Search
$("#schema").jstree(true).search("Your Text Here");

Tags:

Misc Example

Recent Posts