Search code examples
angularjsjstreejstree-search

Angular jstree search plugin


In my current project I use ngjstree.

How can I attach a <input type"search"> to jstree in Angularjs to have a live search?

view

<input type"search">
<div id="js-tree" js-tree="treeConfig" ng-model="tags"></div>

controller

$scope.treeConfig = {
    "plugins": ["checkbox", "search"],
    "core": {
      "check_callback": true,
      "multiple": false,
   }
};

$scope.data = [
  {
    'id': 1,
    'text': 'node 1'
  },
  {
    'id': 2,
    'text': 'node 2'
  }

Solution

  • I Solved the problem.

    HTML

    <input type="text" ng-model="search" ng-keyup="applySearch(search)" placeholder="search">
    <div id="js-tree" js-tree="treeConfig" ng-model="tags" tree="treeInstance"></div>
    

    JS

    $scope.applySearch = function (){
        var to = false;
        if(to) {
           clearTimeout(to);
        }
        to = setTimeout(function () {
           if($scope.treeInstance) {
              $scope.treeInstance.jstree(true).search($scope.search);
           }
        }, 250);
    };