Working scenario: The user have 2 input text field in which he can search a game tag and then append the searched tag value to the 2nd input field.
Problem statement: The user want to add new custom tag that is not present in the searched list and then append the value of this new custom tag in the 2nd input field using onkeyup
$(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>2 Answers
Answers 1
Given the requirements, and your comment that you want to add to the token list as well, you can do something like the following:
$(function() { var newToken; var currId = 100; // starting ID for any additions $('#vidyagames').tokenInput([{ id: 7, name: "Super Mario" }, ... skipping data ...
{ 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")); newToken = null; // without clearing partially typed text would appear as an additional token along with the selected dropdown token }, onDelete: function(item){ sync(this.tokenInput("get")); }, onReady: function(){ $("#token-input-vidyagames").keyup(function(event) { if (event.keyCode === 13 || event.keyCode === 9 || event.keyCode === 188) // return, tab, or comma { if (newToken) $('#vidyagames').tokenInput("add", {id: currId, name: newToken}); // add to the list but only if not null currId++; sync($('#vidyagames').tokenInput("get")); // append tokens to output } newToken = $("tester").text(); // store typed-in token's value prior to next keypress (otherwise it will be empty next Return, Tab, or Comma keypress) }); } }); }); Codepen demo: http://codepen.io/anon/pen/egbppd
Any typed entry is retrieved via the value of $("tester").text() at each keyup. If after an Enter, Tab or Comma keyup if it hadn't already been added by the plugin (i.e. it was not found in the existing token list) it adds it as a new token and updates the second input.
Note that ideally you should check first that new tokens haven't been included already or you'll end up with duplicates (with different IDs). I didn't put in that extra piece of logic.
Answers 2
Your solution won't work, since the thing you are editing is not the input with id vidya anymore. Instead, jQuery Tokeninput creates an <ul> element, which you then get to edit. According to jQuery Tokeninput documentation, there are four callbacks:
- onResult
- onAdd
- onDelete
- onReady
I'd say the best match for your purposes would be the onAdd callback.
I've altered your code. You can find it here
0 comments:
Post a Comment