问题描述
是否可以用变量压缩所有这些 id 和名称?,我尝试 $('#vidyagames').tokenInput([variable]);也尝试输入 url 但没有任何效果。我有函数,它获取所有数据,应该代替 id 和 name 但我替换了函数名,变量没有任何作用。还尝试使用 jQuery("#vidyagames") 但也没有用。我有包含表游戏的数据库。我希望那不是一堆 id 和 name 是来自游戏表的数据,所以我希望不用像这样手动编写带有 id 和 name 的行
$scope.ingredient = [];
$scope.getIngredient = function () {
$http({
url: 'http://127.0.0.1:8081/ingredient',method: "GET",headers: {
"Access-Control-Allow-Origin": "*","Content-Type": "application/json"
}
})
.then(function (response) {
console.log("SUCCESS");
console.log(response);
$scope.ingredient = response.data;
},function (response) { // optional
console.log("ERROR");
console.log(response);
});
}
$scope.getIngredient();
$(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: 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
});
});
@import url('https://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('https://i.imgur.com/qoKmNN9.png'); /* https://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,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',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.4);
-moz-Box-shadow: 1px 2px 1px rgba(0,0.4);
Box-shadow: 1px 1px 2px rgba(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;
}
<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">
<input type="text" id="vidyagames" name="vidya">
</div>
</div><!-- @end #wrapper -->
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://loopj.com/jquery-tokeninput/src/jquery.tokeninput.js'></script><script src="./script.js"></script>
解决方法
我在那里输入了数据而不是组 ID 和名称。还添加了 tokenValue:name。它以前不起作用 bcz tokenValue:"name" name 被双引号