anydragon

1. Load Script

<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

<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

var country_list = ["Afghanistan","Albania","Algeria"];

4. Initialize

$('#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

$('#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

$('#demo-list').tagit({
  beforeTagAdded: null,
  afterTagAdded: null,
  beforeTagRemoved: null,
  afterTagRemoved: null,
  onTagClicked: null,
  onTagLimitExceeded: null,
  onTagAdded: null,
  onTagRemoved: null,
});

여기까지는 인터넷에서 찾을수 있는 일반적인 내용이고 실제로 내가 사용한 코드는 아래와 같다.

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
});