How to add a custome tag to the input text field using javascript or jquery

Question

Current scenario: I have 2 input text field in which a user can search an game tag and then append the searched tag value to the 2nd input field.

Problem: the user want to add the new tag that is not present in the 1st input field and then append the value of this tag in the 2nd input field

Note On pressing Enter (if he not found any input tag) the user might be able to add the new written word ( eg: apple game and the list shows not found) to the 1st input text field and then append this tag as a value in the 2nd text field

For better understanding see my DEMO Code

 $(function() { $('#vidyagames').tokenInput([{ id: 7, name: "Super Mario" }, { id: 11, name: "Battletoads" }, { id: 13, name: "Pong" }, { id: 17, name: "The Legend of Zelda" }, { id: 19, name: "Metroid" }, { id: 23, name: "Donkey Kong Country" }, { id: 29, name: "Super Smash Bros." }, { id: 32, name: "Star Fox" }, { id: 35, name: "Starcraft" }, { id: 37, name: "Pokemon" }, { id: 38, name: "Minecraft" }, { id: 41, name: "The Sims" }, { id: 43, name: "Final Fantasy" }, { id: 44, name: "Resident Evil" }, { id: 46, name: "Kingdom Hearts" }, { id: 47, name: "Tetris" }, { id: 48, name: "Grand Theft Auto" }, { id: 51, name: "World of Warcraft" }, { id: 53, name: "Metal Gear Solid" }, { id: 54, name: "Civilization" }, { id: 56, name: "Pac-Man" }, { id: 59, name: "Animal Crossing" }, { id: 62, name: "Spyro the Dragon" }, { id: 64, name: "Crash Bandicoot" }, { id: 65, name: "Sonic the Hedgehog" }, { id: 72, name: "Tomb Raider" }, { id: 77, name: "Mortal Kombat" }, { id: 81, name: "Space Invaders" }], { theme: "facebook", hintText: "Know of any cool games?", noResultsText: "Nothin' found.", searchingText: "Gaming...", preventDuplicates: true, onAdd: function(item){ sync(this.tokenInput("get")); }, onDelete: function(item){ sync(this.tokenInput("get")); } }); }); 

  name: "Minecraft" }, { id: 41, name: "The Sims" }, { id: 43, name: "Final Fantasy" }, { id: 44, name: "Resident Evil" }, { id: 46, name: "Kingdom Hearts" }, { id: 47, name: "Tetris" }, { id: 48, name: "Grand Theft Auto" }, { id: 51, name: "World of Warcraft" }, { id: 53, name: "Metal Gear Solid" }, { id: 54, name: "Civilization" }, { id: 56, name: "Pac-Man" }, { id: 59, name: "Animal Crossing" }, { id: 62, name: "Spyro the Dragon" }, { id: 64, name: "Crash Bandicoot" }, { id: 65, name: "Sonic the Hedgehog" }, { id: 72, name: "Tomb Raider" }, { id: 77, name: "Mortal Kombat" }, { id: 81, name: "Space Invaders" }], { theme: "facebook", hintText: "Know of any cool games?", noResultsText: "Nothin' found.", searchingText: "Gaming...", preventDuplicates: true, onAdd: function(item){ sync(this.tokenInput("get")); }, onDelete: function(item){ sync(this.tokenInput("get")); } }); }); @import url('http://fonts.googleapis.com/css?family=Henny+Penny'); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { overflow-y: scroll; } body { background: #e7e7e7 url('http://i.imgur.com/qoKmNN9.png'); /* http://subtlepatterns.com/natural-paper/ */ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 62.5%; line-height: 1; color: #444; padding-top: 25px; padding-bottom: 65px; } br { display: block; line-height: 1.6em; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } input, textarea { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong, b { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } h1 { font-family: 'Henny Penny', Arial, sans-serif; font-weight: normal; font-size: 3.35em; line-height: 1.6em; margin-bottom: 15px; color: #616161; } p { font-size: 1.6em; line-height: 1.25em; margin-bottom: 15px; } /* page structure */ #wrapper { display: block; width: 800px; margin: 0 auto; background: #fff; padding: 35px 22px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4); -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } #searchbar { display: block; padding: 15px 0px; } /* custom settings */ .token-input-token-facebook p { font-size: 1.0em; color: #555; } .token-input-selected-token-facebook p { color: #fff; } /** tokeninputs **/ /* Example tokeninput style #1: Token vertical list*/ ul.token-input-list { overflow: hidden; height: auto !important; height: 1%; width: 400px; border: 1px solid #999; cursor: text; font-size: 12px; font-family: Verdana; z-index: 999; margin: 0; padding: 0; background-color: #fff; list-style-type: none; clear: left; } ul.token-input-list li { list-style-type: none; } ul.token-input-list li input { border: 0; width: 350px; padding: 3px 8px; background-color: white; -webkit-appearance: caret; } li.token-input-token { overflow: hidden; height: auto !important; height: 1%; margin: 3px; padding: 3px 5px; background-color: #d0efa0; color: #000; font-weight: bold; cursor: default; display: block; } li.token-input-token p { float: left; padding: 0; margin: 0; } li.token-input-token span { float: right; color: #777; cursor: pointer; } li.token-input-selected-token { background-color: #08844e; color: #fff; } li.token-input-selected-token span { color: #bbb; } div.token-input-dropdown { position: absolute; width: 400px; background-color: #fff; overflow: hidden; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; cursor: default; font-size: 12px; font-family: Verdana; z-index: 1; } div.token-input-dropdown p { margin: 0; padding: 5px; font-weight: bold; color: #777; } div.token-input-dropdown ul { margin: 0; padding: 0; } div.token-input-dropdown ul li { background-color: #fff; padding: 3px; list-style-type: none; } div.token-input-dropdown ul li.token-input-dropdown-item { background-color: #fafafa; } div.token-input-dropdown ul li.token-input-dropdown-item2 { background-color: #fff; } div.token-input-dropdown ul li em { font-weight: bold; font-style: normal; } div.token-input-dropdown ul li.token-input-selected-dropdown-item { background-color: #d0efa0; } /** tokeninputs facebook **/ /* Example tokeninput style #2: Facebook style */ ul.token-input-list-facebook { overflow: hidden; height: auto !important; height: 1%; width: 550px; border: 1px solid #8496ba; cursor: text; font-size: 12px; font-family: Verdana; min-height: 1px; z-index: 999; margin: 0; padding: 0; background-color: #fff; list-style-type: none; clear: left; } ul.token-input-list-facebook li input { border: 0; width: 100px; padding: 3px 8px; background-color: white; margin: 2px 0; -webkit-appearance: caret; } li.token-input-token-facebook { overflow: hidden; height: auto !important; height: 15px; margin: 3px; padding: 1px 3px; background-color: #eff2f7; color: #000; cursor: default; border: 1px solid #ccd5e4; font-size: 11px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; float: left; white-space: nowrap; } li.token-input-token-facebook p { display: inline; padding: 0; margin: 0; } li.token-input-token-facebook span { color: #a6b3cf; margin-left: 5px; font-weight: bold; cursor: pointer; } li.token-input-selected-token-facebook { background-color: #5670a6; border: 1px solid #3b5998; color: #fff; } li.token-input-input-token-facebook { float: left; margin: 0; padding: 0; list-style-type: none; } div.token-input-dropdown-facebook { position: absolute; width: 400px; background-color: #fff; overflow: hidden; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; cursor: default; font-size: 11px; font-family: Verdana; z-index: 1; } div.token-input-dropdown-facebook p { margin: 0; padding: 5px; font-weight: bold; color: #777; } div.token-input-dropdown-facebook ul { margin: 0; padding: 0; } div.token-input-dropdown-facebook ul li { background-color: #fff; padding: 3px; margin: 0; list-style-type: none; } div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook { background-color: #fff; } div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook { background-color: #fff; } div.token-input-dropdown-facebook ul li em { font-weight: bold; font-style: normal; } div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { background-color: #3b5998; color: #fff; }​ 

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://loopj.com/jquery-tokeninput/src/jquery.tokeninput.js"></script> <script> function sync(items) { var value = items.reduce(function(s, item){ return s + ' ' + item.name; }, ''); $('#n2').val(value.slice(1)); } </script> <body> <div id="wrapper"> <h1>Dynamic Tag Input Suggestions</h1> <p>Start typing the name of a popular video game to get some helpful suggestions.</p> <div id="searchbar"> 1st input <input type="text" id="vidyagames" name="vidya"> <br/> <br/> 2nd input <input id="n2" size="50"> </div> </div> <!-- @end #wrapper --> </body>​ 

Answer 1

Someone asked the same question and it seems to be implemented since v1.6.1 of jQuery TokenInput. You should see this post .