1. Load Script
|
1 2 3 |
<link href="css/jquery.tagit.css" rel="stylesheet"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="js/tag-it.min.js"></script> |
2. Basic HTML
|
1 2 3 4 5 |
<form> <input name="tags" id="demo-input" value="Armenia, Germany" disabled="true"> <ul id="demo-list"></ul> <input type="submit" value="Submit"> </form> |
3. Suggested values
|
1 |
var country_list = ["Afghanistan","Albania","Algeria"]; |
4. Initialize
|
1 2 3 4 5 6 |
$('#demo-list').tagit({ availableTags: country_list, // This will make Tag-it submit a single form value, as a comma-delimited field. singleField: true, singleFieldNode: $('#demo-input') }); |
5. More configuration
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('#demo-list').tagit({ allowDuplicates: false, caseSensitive: true, fieldName: "tags", placeholderText: null, readOnly: false, removeConfirmation: false, tagLimit: null, availableTags: [], autocomplete: {}, showAutocompleteOnFocus: false, allowSpaces: false, singleField: false, singleFieldDelimiter: ",", singleFieldNode: null, animate: true, tabIndex: null, }); |
기본 기능은 space를 누르면 tag 처리를 한다. 하지만 난 tag 에 space를 넣을수 있고 comma 를 처리하게 하고 싶었다. 딱히 환경에 comma 가 없어서 혹시 하는 마음에 allowSpaces: true 를 했더니 내 생각대로 움직였다.
6. Callback function
|
1 2 3 4 5 6 7 8 9 10 |
$('#demo-list').tagit({ beforeTagAdded: null, afterTagAdded: null, beforeTagRemoved: null, afterTagRemoved: null, onTagClicked: null, onTagLimitExceeded: null, onTagAdded: null, onTagRemoved: null, }); |
여기까지는 인터넷에서 찾을수 있는 일반적인 내용이고 실제로 내가 사용한 코드는 아래와 같다.
|
1 2 3 4 5 6 |
var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua']; $('#tag').tagit({ availableTags: sampleTags, allowSpaces: true }); |
