0
当前情景：我有2个输入文本字段，用户可以在其中搜索游戏标签，然后将搜索到的标签值附加到第二个输入字段。如何使用JavaScript或jQuery添加客户标签到输入文本字段
问题：用户要添加新的标签是不存在的第一个输入字段，然后追加该变量的值在第二个输入字段
注意在按下Enter键（如果他没有找到任何输入标签），用户可能能够将第一个输入文本字段添加新的文字（例如：apple game，列表显示未找到），然后将该标签附加为第二个文本中的值字段
为了更好的理解see my DEMO Code
$(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>