MaxInterview - jstree search example

showing results for - "jstree search example"
01 Jan 2019
1
2<!DOCTYPE html>
3<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
4<head>
5    <meta charset="utf-8" />
6    <title>Simple jsTree</title>
7    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
9    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
10    <script type="text/javascript">
11        $(function () {
12            var jsondata = [
13                           { "id": "ajson1", "parent": "#", "text": "Simple root node" },
14                           { "id": "ajson2", "parent": "#", "text": "Root node 2" },
15                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
16                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
17            ];
18
19            createJSTree(jsondata);
20        });
21
22        function createJSTree(jsondata) {
23            $('#SimpleJSTree').jstree({
24                "core": {                    
25                    'data': jsondata
26                },
27                "plugins": ["search"],
28                "search": {
29                    "case_sensitive": false,
30                    "show_only_matches": true
31                }
32            });
33        }
34
35        $(document).ready(function () {
36            $(".search-input").keyup(function () {
37                var searchString = $(this).val();
38                $('#SimpleJSTree').jstree('search', searchString);
39            });
40        });
41        
42    </script>
43</head>
44<body>
45    <input id="search-input" class="search-input" />
46    <br />
47    <div id="SimpleJSTree"></div>
48</body>
49</html>
50
51
source