如何將Cutome標簽添加到輸入字段，然后將所有標簽vlaue附加到另一個輸入文本字段

Question

1：如果用戶在自動完成搜索過程中未找到所需標簽，則希望將自定義標簽添加到第一個輸入文本字段。

2：他還需要將所有標簽值以文本值的形式從第一輸入文本復制到第二輸入文本字段。

3：當前，我正在使用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){ document.getElementById('n2').value = item.name; } }); }); 

 @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() { var n1 = document.getElementById('vidyagames'); var n2 = document.getElementById('n2'); n2.value = n1.value; } </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" onkeyup="sync()"> <br/> <br/> 2nd input <input id="n2" size="50"> </div> </div> <!-- @end #wrapper --> </body>​ 

Answer 1

首先， 這里是Tokeninput的快速參考。

我不明白第一步的含義。 對於第2步和第3步 ，您應該同時設置： onAdd和onDelete傳遞當前選定標簽的數組（使用this.tokenInput("get") ）進行同步，然后將生成第二個輸入的值（無需添加任何事件偵聽器）。 像這樣：

onAdd: function(){
    sync(this.tokenInput("get"));
},
onDelete: function(){
    sync(this.tokenInput("get"));
}

和這個：

function sync(items) {
    var value = items.reduce(function(s, item){
        // return s + '|' + item.name; // to separate the tags using | instead of a space
        return s + ' ' + item.name;
    }, '');

    // if you're already using jQuery why use document.getElementById
    $('#n2').val(value.slice(1)); // .slice to remove the first space
}

工作代碼：

 $(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")); } }); }); 

 @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>​