如何将cutome标记添加到输入字段，然后将所有标记附加到另一个输入文本字段

时间：2017-02-03 18:50:42

标签： javascript jquery arrays html5

1：如果用户在自动完成搜索期间未找到所需的标记，则会向第一个输入文本字段添加custom tag。

2：他还需要将文本值形式的所有标签值从第一个输入文本复制到第二个输入文本字段。

3：目前我正在使用onkeyup将标签值从第一个输入字段添加到第二个输入字段。

以下是full code Demo我的问题。

$(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>​

1 个答案:

答案 0 :(得分：0)

首先，here是令牌输入的快速参考。

我不明白第1步的含义。对于第2步和第3步，您应同时设置：onAdd和onDelete以传递当前所选标记的数组（使用{{1然后将同步哪个将生成第二个输入的值（不需要添加任何事件侦听器）。像这样：

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

相关问题
最新问题