[Tagify] jQuery + Tagify 라이브러리 사용하여 태그 만들기

 

📌 Tagify 라이브러리

---

https://yaireo.github.io/tagify/

Tagify - Tags input Component

 

 

 

 

📌 Tagify 라이브러리 Github 주소

---

https://github.com/yairEO/tagify

GitHub - yairEO/tagify: 🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue

 

 

 

 

📌 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 : 입력 가능한 태그 갯수를 제한합니다. 초과할 시 초과된 태그의 내용이 자동으로 삭제됩니다.