Demo for Storkjs Tags Input

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="https://rawgit.com/storkjs/tags-input/master/dist/tags-input.min.css">
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/storkjs/tags-input/master/dist/simple-theme.min.css">

  <script src="https://rawgit.com/storkjs/shims/master/dist/shims.min.js"></script>
  <script src="https://rawgit.com/storkjs/tags-input/master/dist/tags-input.min.js"></script>

  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    
    html,
    body {
      height: 100%;
    }
    
    body,
    #parentOne,
    #parentTwo {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      margin: 20px 0 0 0;
    }
    
    #parentOne {
      height: 95%;
      padding-top: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #parentTwo {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      height: 95%;
      padding-top: 20px;
      border-top: 1px solid #d0d0d0;
    }
    
    #tagsInput {
      width: 500px;
      height: 32px;
    }
    #consoleText {
      max-width: 500px;
      margin-top: 10px;
    }
  </style>

  <script>
    var xhr, i, j, regex;
    var suggestions_handler = function suggestions_handler(text, chosenTags, callback) {
			text = text.trim();

			if (text.length > 0) { // perform search only on text
				var xhr = new XMLHttpRequest();
				xhr.open("GET", "suggestions.json", true);
				xhr.onreadystatechange = function() {
					if (xhr.readyState != 4 || xhr.status != 200) {
						return;
					}

					var suggestionGroups = JSON.parse(xhr.responseText);
					if (!suggestionGroups.data) {
						return;
					}

					suggestionGroups = suggestionGroups.data;

					regex = new RegExp(text, 'gi');
					var ret = [];

					for (i = 0; i < suggestionGroups.length; i++) {
						for (j = 0; j < suggestionGroups[i].items.length; j++) {
							if (regex.test(suggestionGroups[i].items[j].displayName)) {
								if (!ret[ret.length - 1] || ret[ret.length - 1].id !== suggestionGroups[i].id) {
									ret.push({
										displayName: suggestionGroups[i].displayName,
										id: suggestionGroups[i].id,
										items: []
									});
								}
								ret[ret.length - 1].items.push({
									displayName: suggestionGroups[i].items[j].displayName,
									value: suggestionGroups[i].items[j].value
								});
							}
						}
					}
					callback(ret);
				};

				xhr.send();
			} else {
				callback([]);
			}
		};

    document.addEventListener("DOMContentLoaded", function(e) {
      var testTags = new storkTagsInput({
        element: document.getElementById('tagsInput'),
        suggestionsHandler: suggestions_handler,
        rechooseRemove: true,
        inputMinWidth: 70
      });

      testTags.addTag({
        value: 'john',
        displayName: 'John Smith',
        groupId: 'male_names',
        groupDisplayName: 'Male Names'
      });
      
      var consoleText = document.getElementById('consoleText');
      
      testTags.addEventListener('tag-added', function(e) {
        consoleText.innerText = 'added a tag:\n' + JSON.stringify(e.detail);
      }, false);
      testTags.addEventListener('tag-removed', function(e) {
        consoleText.innerText = 'removed a tag:\n' + JSON.stringify(e.detail);
      }, false);
    });
  </script>
</head>

<body>
  <div id="parentOne">
    <div id="parentTwo">
      <div id="tagsInput"></div>
      <p id="consoleText">&nbsp;</p>
    </div>
  </div>
</body>

</html>

{"data": [
  {
    "displayName": "Male Names",
    "id": "male_names",
    "items": [
      {"value": "john", "displayName": "John Smith"},
      {"value": "dave", "displayName": "Dave Cohen"},
      {"value": "richard", "displayName": "Richard Ferrel"},
      {"value": "robert", "displayName": "Robert Miller"}
    ]
  },
  {
    "displayName": "Female Names",
    "id": "female_names",
    "items": [
      {"value": "jennifer", "displayName": "Jennifer Smith"},
      {"value": "katy", "displayName": "Katy Cohen"},
      {"value": "laura", "displayName": "Laura Ferrel"},
      {"value": "melissa", "displayName": "Melissa Miller"}
    ]
  }
]}