LANGUAGE/JavaScript
[Tagify] jQuery + Tagify 라이브러리 사용하여 태그 만들기
31daylee
2024. 4. 22. 16:32
728x90
📌 Tagify 라이브러리
https://yaireo.github.io/tagify/
📌 Tagify 라이브러리 Github 주소
https://github.com/yairEO/tagify
📌 Tagify 사용하기
사용한 디자인
CDN 스크립트 코드
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
HTML 코드보기
<div class="form-row">
<div class="form-group col-lg-6">
<label class="form-label">태그</label>
<div class="form-control-wrap form-control-fill50">
<input id="iptInsertTag" name='tags-outside' class='tagify--outside'>
</div>
</div>
</div>
js 코드보기
var iptTag = $('input[name="tags-outside"]');
var tagify = new Tagify(iptTag[0], {
whitelist: tagNames,
placeholder: '태그는 최대 5개까지 가능합니다.',
focusable: false,
pattern: /^.{0,20}$/,
dropdown: {
position: "input",
enabled: 0,
}
});
tagify.settings.maxTags = 5;
- iptTag[0]: jQuery 객체에서 첫 번째 DOM 요소를 추출하여 Tagify 생성자에 전달합니다.
- whitelist: 사용자가 태그로 추가할 수 있는 태그의 목록입니다.
- placeholder: 입력 필드의 플레이스홀더 텍스트입니다.
- focusable: 입력 필드가 포커스를 받을 수 있는지 여부를 설정합니다 (false로 설정하면 포커스를 받을 수 없습니다).
- pattern: 태그가 따라야 하는 정규 표현식 패턴입니다. 여기서는 최대 20자까지의 어떤 문자열도 허용됩니다.
- dropdown: 태그 제안을 위한 드롭다운 설정입니다. 여기서는 position을 "input"으로 설정하여 입력 필드에 붙어 나타나게 하고, enabled을 0으로 설정하여 자동 활성화를 비활성화합니다.
-> 드롭다운 디자인을 선택할 시에 필수적입니다. - tagify.settings.maxTags : 입력 가능한 태그 갯수를 제한합니다. 초과할 시 초과된 태그의 내용이 자동으로 삭제됩니다.
728x90