[jQuery] jsTree 검색추가하기

jsTree는 제이쿼리 플러그인으로 손쉽게 트리구조를 만들 수 있는 라이브러리이다.

jsTree 사용법은 매우 간단한 편이라 jstree 공식 docs를 참고하면 된다.

검색기능 추가

plugins부분에 search를 추가하고 검색창에 keyup이벤트로 search()를 호출하면 된다.
show_only_matches 속성은 디폴트가 false인데 나는 true로 하고싶어서 true로 주었다. 해당 속성은 이름에도 알 수 있듯 검색시 매치되는 노드만 보여준다.

var $testTree = $('#testTree');

$testTree.jstree({
    'core' : {
        'data' : data,
        "themes":{
            "icons":false
        }
    },
    "search": {
        "show_only_matches": true,
        "show_only_matches_children": true
    },
    "plugins" : ["search"]
});

$('#search_input').keyup(debounce(function () {
	var v = $('#search_input').val().trim();
	$testTree.jstree(true).search(v);
}, 50));

Easy
Peasy
Lemon Squeezy🍋