如何添加自定义标记，然后使用onkeyup将一个输入字段的值显示到第二个输入字段？

Question

工作方案： 用户有2个输入文本字段，可以在其中搜索游戏代码，然后将搜索到的代码值附加到第2个输入字段。

问题陈述： 用户想要添加搜索列表中不存在的新自定义标记，然后在第二个输入中附加此新自定义标记的值字段使用 onkeyup

Here is the working Demo

＆＃13;

＆＃13;

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

});

＆＃13;

       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;
}​

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据要求以及您要添加到令牌列表的评论，您可以执行以下操作：

$(function() {

  var newToken;
  var currId = 100; // starting ID for any additions

    $('#vidyagames').tokenInput([{
        id: 7,
        name: "Super Mario"
    },

...跳过数据......

    {
        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演示：http://codepen.io/anon/pen/egbppd

通过每个$("tester").text()的{​​{1}}值检索所有输入的条目。如果在输入，制表符或逗号keyup之后，如果插件尚未添加（即在现有令牌列表中找不到它），则将其添加为新令牌并更新第二个{ {1}}。

请注意，理想情况下，您应首先检查新令牌是否已被包含在内，否则您最终将获得重复项（具有不同的ID）。我没有投入那些额外的逻辑。

Answer 2

您的解决方案无效，因为您正在编辑的内容不再是ID vidya的输入。相反，jQuery Tokeninput会创建一个<ul>元素，然后您可以对其进行编辑。根据{{​​3}}，有四个回调：

• onResult
• 使用onAdd
• onDelete
• onReady

我认为最适合您的目的是onAdd回调。

我改变了你的代码。你可以找到它jQuery Tokeninput documentation