Laravel 引导标记输入,对象作为标记打印头自由输入不工作
我正在使用引导标记输入(对象作为标记-)进行标记输入。 它可以将对象作为自动完成建议的标记使用 但我也在尝试主动自由输入。因此,如果标签不在自动建议列表中,则允许添加新标签 这是我的密码:Laravel 引导标记输入,对象作为标记打印头自由输入不工作,laravel,typeahead,bloodhound,bootstrap-tags-input,Laravel,Typeahead,Bloodhound,Bootstrap Tags Input,我正在使用引导标记输入(对象作为标记-)进行标记输入。 它可以将对象作为自动完成建议的标记使用 但我也在尝试主动自由输入。因此,如果标签不在自动建议列表中,则允许添加新标签 这是我的密码: var tags = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'), queryTokenizer: Bloodhound.tokenizers.whitespace, prefetc
var tags = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
ttl: 1,
url:'[Json File Path]'
}
});
tags.initialize();
var elt = $('input#tags');
elt.tagsinput({
tagClass: 'badge badge-primary',
itemValue: function(item) {
return item.id;
},
itemText: 'text',
freeInput: true,
typeaheadjs: {
name: 'tags',
displayKey: 'text',
source: tags.ttAdapter()
}
});
示例Json:
[{"id":15,"text":"money"},{"id":14,"text":"startup"},{"id":13,"text":"inspiration"},{"id":12,"text":"success"},{"id":11,"text":"challenge"}]
jS
html
代码笔
jS
html
代码笔
尝试将freeInput放在typeAhead@Demonyowh,已尝试,但对我无效。请尝试将freeInput放在后面typeAhead@Demonyowh,尝试过,但对我无效。谢谢你的帮助。自由输入仅在使用字符串作为标记时有效。我改变了代码结构,使用字符串作为选项,而不是数组。@ShabnamKhan你能标记我的答案,这样我就可以得到分数吗?谢谢你的帮助。自由输入仅在使用字符串作为标记时有效。我改变了代码结构,使用字符串作为选项,而不是数组。@ShabnamKhan你能标记我的答案,这样我就可以得到分数吗?
var citynames = new Bloodhound({
datumTokenizer:
Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/citynames.json',
filter: function(list) {
return $.map(list, function(cityname) {
return { name: cityname }; });
}
}
});
citynames.initialize();
$('input').tagsinput({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
}
});
<div class="container">
<div class="col-12-xs">
<div class="">
<input type="text" value="Amsterdam,Washington" />
</div>
</div>
</div>
.icon-github {
background: no-repeat url('../img/github-16px.png');
width: 16px;
height: 16px;
}
.bootstrap-tagsinput {
width: 100%;
}
.accordion {
margin-bottom:-3px;
}
.accordion-group {
border: none;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.twitter-typeahead .tt-hint
{
display: none;
}
.tt-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
cursor: pointer;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: nowrap;
}
.tt-suggestion:hover,
.tt-suggestion:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #428bca;
}