JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://remysharp.com/downloads/tag.js"></script>
<fieldset> 
    <legend>Enter your tags (predefined)</legend> 
    <div> 
        <form id="file_form" action="" method="get">
            <input class="wide" type="text" name="tags" value="" id="tags" /> 
            <input type="submit" value="Submit" />
        </form>
    </div> 
</fieldset>

CSS

FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }

      
      SPAN.tagMatches {
          margin-left: 10px;
      }
      
      SPAN.tagMatches SPAN {
          padding: 2px;
          margin-right: 4px;
          cursor: pointer;
      }

JavaScript

var dictionary = jQuery.parseJSON('[ { "name": "Ann.c",  "realvalue": "./34534j435345j3b3"  }, {   "name": "Ann.h",   "realvalue": "./333dfsdGjh45j3b5" }]');
var i=0;    
var json_tags=new Array();
for (word in dictionary ) {
  // alert( dictionary[i]['name']);
   json_tags[i] =  dictionary[i]['name'];
   i++;
}

$('#tags').tagSuggest({
    tags: json_tags
});

$('form').submit(function() {
        var j=0;
    for (word in dictionary ) {  
       var text = $("#tags").val().replace(dictionary[j]['name'], dictionary[j]['realvalue']);
             $("#tags").val(text);
        j++;
        //alert(text);
    }
    //alert($("#tags").val());
     return false;
}) ;