[jsTree] plugin search를 사용하여 검색기능 활성화하기

jstree 에서 제공하는 plugin중에 하나인 search에 대해 알아보자

영어단어 그대로의 의미인 검색기능을 제공해주는 플러그인인데 사용방법은 간단하다.

$('#tree').jstree({ 
	'core' : {
	'data' : [
			{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
			{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
			{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
			{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
		]
	},
	'plugins' : ["search"],
});

이런식으로 여타 플러그인 사용하는것처럼 plugins 부분에 search를 선언해주면 끝이다.

search의 효과는 공식홈에서 안내하는것처럼 matching nodes를 표시해준다.

 

This plugin adds the possibility to 
search for items
 in the tree and even to show only matching nodes.

 

당연히 search를 선언했다고 바로 되는건 아니고 아래와 같이 사용해야한다.

$('#tree').jstree(true).search(text);

이런식으로 search함수에 검색어를 넣어서 사용한다.

예를들어 검색어를 입력할때마다 감지한다던가, 검색어 버튼을 감지한다던가 하면될것이다. 결과는 아래와같이 나온다.

---

---

추가적으로 search 플러그인 역시 무수한 옵션들이 존재하는데 그중에 두가지를 다뤄보자면

search 옵션 : https://www.jstree.com/api/#/?q=$.jstree.defaults.search

검색결과만 트리에 보이는 옵션과 검색결과의 자식요소도 보이는 옵션을 다룰것이다.

"plugins" : ["search"],
"search" : {
    "show_only_matches" : true,
    "show_only_matches_children" : true,
}

show_only_matches 와 show_only_mathces_children 옵션이다.

대략 아래와 같은 결과가 나온다.