728x90
반응형
에디터에서 흔히 많이 사용되는 input 영역에 2개 이상의 태그를 작성하기 위한 기능이 필요했다.
jQuery에서 사용할 수 있는 plugin을 찾아보니 Suggestags 라는 것이 있어 사용하기로 했다.
* plugin file download : https://github.com/amsify42/jquery.amsify.suggestags
* 환경 : jQuery v3.5.1, Bootstrap v4.5.3 사용, Suggestags 1.27.0 적용
1. plugin 적용
|
1
2
|
<link rel="stylesheet" href="/css/amsify.suggestags.css">
<script src="/js/jquery.amsify.suggestags.js"></script>
|
cs |
2. 적용할 태그
|
1
|
<input type="text" class="form-control" id="tagsTxt">
|
cs |
3. 내 소스에 적용
3-1. 기본 가이드
plugin 가이드 : https://openbase.com/js/suggestags/documentation
javascript 객체 상수 (constant) : https://webclub.tistory.com/527
기본적인 사용방법은 해당 가이드를 사용하면 된다.
3-2. 내가 필요했던 기능
1) javascript로 태그를 전부 다른 값으로 변경해야 한다.
2) javascript로 태그를 하나 추가하고 싶다.
3) 태그가 변경될 시 callback 이벤트를 사용하고 싶다.
3-3. 기존 소스의 문제점
다만 3-2의 내용들을 사용하기 위해서 refresh를 사용했는데
이 경우 기존에 선언시 설정했던 정보가 모두 날아가는 문제가 있었다.
3-4. 그래서 아래와 같은 함수를 만들어 적용했다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
// plugin 사용을 위한 값 세팅
definedValues();
// plugin 적용
usedSuggesTagsPlugin($('#tagsTxt'), 'init');
// 태그 전체 변경 변경시
// tagsList : 'tag1,tag2' 형태의 스트링
usedSuggesTagsPlugin($('#tagsTxt'), 'setTags', {tags:tagsList});
// 태그 하나 추가 시
usedSuggesTagsPlugin($('#tagsTxt'), 'addTag', {tags:tag});
// javascript 객체 상수 (constant), 출처 : https://webclub.tistory.com/527
function definedValues(){
constant.set('suggestagsSetting', {
tagLimit : 10, // 태그 최대 갯수 제한
tags : '', // 입력되는 태그 값
});
}
/**
* Suggestags의 사용을 위한 보조 함수
* 출처 : https://openbase.com/js/suggestags/documentation
* @param selector : jquery형 selector
* @param action : 어떤 형태의 작업인지
* => init : 사용을 위한 선언
* => setTags : js로 태그 전체 변경시
* => addTag : js로 태가 하나 추가시
* => getClass : plugin에서 사용되는 클레스 값 전체를 구할때
* @param value : object형, action이 getClass인 경우 사용함
* @returns
*/
function usedSuggesTagsPlugin(selector, action, value){
if (isNull(selector))
throw ': we need selector info for Suggestags plugin!';
var objValue = !isNull(value) ?
Object.assign(constant.get('suggestagsSetting'), value)
: constant.get('suggestagsSetting');
// 선언시 세팅값 정의
var objInit = {
// 태그 반경시 callback 이벤트 설정
afterAdd : function(e) {
checkTagValuse();
},
afterRemove : function(e) {
checkTagValuse();
},
};
if (!isNull(objValue) && !isNull(objValue.tagLimit) && Number(objValue.tagLimit) > 0) {
Object.assign(objInit, {
tagLimit: objValue.tagLimit
});
}
// plugin 적용
if (isNull(action) || action == 'init') {
init();
return;
}
if (!isNull(action) && (action == 'setTags' || action == 'addTag')
&& !isNull(objValue) && !isNull(objValue.tags)) {
// refresh 사용시 tagLimit와 같은 기존 세팅 값이 초기화 되므로 재생성하도록 처리
init();
if (action == 'setTags') {
var arrValue = objValue.tags.split(',');
$.each(arrValue, function(i, e){
amsifySuggestags.addTag(e.trim());
});
return;
} else if (action == 'addTag') {
amsifySuggestags.addTag(objValue.tags.trim());
return;
}
} else if (!isNull(action) && action == 'setTags'
&& !isNull(objValue) && isNull(objValue.tags)) {
init();
return;
}
/**
* 사용예
* 1. 아직 반영되지 않은 입력중인 태그 값을 구할때
* : $('input[class="'+usedSuggesTagsPlugin(selector, 'getClass').sTagsInput.substring(1)+'"]').val()
*/
if(!isNull(action) && action == 'getClass') {
amsifySuggestags = new AmsifySuggestags(selector);
return amsifySuggestags.classes;
}
/* 내부함수 - 시작 */
function init(){
if (action != 'addTag') selector.val('');
amsifySuggestags = new AmsifySuggestags(selector);
amsifySuggestags.destroy();
amsifySuggestags = new AmsifySuggestags(selector);
amsifySuggestags._settings(objInit);
amsifySuggestags._init();
}
// 태그 변경 시 이벤트
function checkTagValuse(){
// 입력된 태그 값을 비교하여 같거다 다른 경우 분기
}
/* 내부함수 - 끝 */
}
/**
* param이 null, undefined, 공백 포함 빈 스트링인 경우 true, 값이 있는 경우 false
* @param param
*/
function isNull(param){
if(typeof param == "undefined" || param == null || param.length == 0
|| (typeof param == 'string' && (param == "" || param.trim().length == 0)))
return true;
else
return false ;
}
|
cs |
분명히 더 아름다운 방법이 있겠지만 우선 이렇게 마무리 했다.
(어후 삽질이야...)
728x90
반응형