2017-02-04 79 views
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>​

回答

0

有人問同樣的問題,似乎因爲jQuery的TokenInput的V1.6.1實施。你應該看到這個post

相關問題