Angular jstree search plugin

635 views Asked by At

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'
  }
1

There are 1 answers

0
Morteza QorbanAlizade On BEST ANSWER

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);
};