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. […]