Dynamic Tags Input With Autocomplete Using AJAX

A lightweight and dynamic jQuery tags input plugin that allows the user to type multiple items as tags or select tags from a suggestion list as they type.

How to use it:

1. Load the stylesheet tags.css and JavaScript tags.js in the html document.

<link href="tags.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="tags.js"></script>

2. Create a set of pre-selected tags as follows (optional):

<span class="data">
  <span class="tag">
    <span class="text" _value="jquery">jQuery</span>
    <span class="close">&times;</span></span>
  <span class="tag">
    <span class="text" _value="script">Script</span>
    <span class="close">&times;</span>
  </span>
</span>

3. Create the html for the suggestion list.

<span class="autocomplete">
  <input type="text" />
    <div class="autocomplete-items">
    </div>
</span>

4. Wrap them into the tags input container.

<div class="tags-input" id="myTags">
  <span class="data">
    <span class="tag">
      <span class="text" _value="jquery">jQuery</span>
      <span class="close">&times;</span></span>
    <span class="tag">
      <span class="text" _value="script">Script</span>
      <span class="close">&times;</span>
    </span>
  </span>
  <span class="autocomplete">
    <input type="text" />
      <div class="autocomplete-items">
      </div>
  </span>
</div>

5. Define your own suggestions in a JSON file.

// data.json
[
  {"name": "JavaScript","id": 1},
  {"name": "HTML5","id": 2},
  {"name": "CSS3","id": 3},
  {"name": "CSSScript","id": 4}
]

6. Populate the suggestion list using AJAX requests.

let sug_area=$(element).parents().eq(2).find('.autocomplete .autocomplete-items');
  $.getJSON("data.json", function( data ) {
    _tag_input_suggestions_data = data;
    $.each(data,function (key,value) {
      let template = $("<div>"+value.name+"</div>").hide()
      sug_area.append(template)
      template.show()
    })
  });
}

---

This awesome jQuery plugin is developed by neveresthub. For more Advanced Usages, please check the demo page or visit the official website.