jstree ajax search

Solutions on MaxInterview for jstree ajax search by the best coders in the world

showing results for - "jstree ajax search"

22 Jul 2017

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

Jacopo

10 Nov 2019

1 $("#schema").jstree({
2   "core": {
3                "data": {
4                    "url": url,
5                    "type": "post",
6                    "data": function (node) {
7                        return { "ParentId": node.id };
8                    }
9                }
10            },
11   "search": {
12                "case_insensitive": true,
13                "show_only_matches": true,
14                "show_only_matches_children": true,
15                ajax: {
16                    "url": url,
17                    "type": "post",
18                    "data": {"yourdata": showtableonly  }
19                }
20            },
21            "plugins": ["search"], 
22            });
23//Example Search
24$("#schema").jstree(true).search("Your Text Here");