Как добавить пользовательский тег, а затем активировать значение из одного поля ввода во второе поле ввода с помощью onkeyup?

Рабочий сценарий: Пользователь имеет 2 текстовых поля ввода, в которых он может выполнять поиск в теге игры, а затем добавляет искомое значение тега во второе поле ввода.

Проблема: Пользователь хочет добавить новый пользовательский тег, отсутствующий в списке поиска, а затем добавить значение этого нового пользовательского тега во втором поле ввода, используя 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>

ОТВЕТЫ

Ответ 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 value prior to next keypress (otherwise it will be empty next Return, Tab, or Comma keypress)
          });
        }
    }); 
});

Codepen demo: http://codepen.io/anon/pen/egbppd

Любая введенная запись извлекается через значение $("tester").text() в каждом keyup. Если после Enter, Tab или Comma keyup, если он еще не был добавлен плагином (т.е. Он не был найден в существующем списке токенов), он добавляет его как новый токен и обновляет второй input.

Обратите внимание, что в идеале вы должны сначала проверить, что новые токены уже не были включены или вы получите дубликаты (с разными идентификаторами). Я не добавил в эту дополнительную логику.

Ответ 2

Ваше решение не будет работать, так как вещь, которую вы редактируете, больше не является вводом с id vidya. Вместо этого jQuery Tokeninput создает элемент <ul>, который вы затем можете редактировать. Согласно jQuery Tokeninput documentation, есть четыре обратных вызова:

  • onResult
  • onAdd
  • OnDelete
  • onReady

Я бы сказал, что лучшим совпадением для ваших целей будет обратный вызов onAdd.

Я изменил ваш код. Вы можете найти его здесь