以标签的形式显示来自源的值
Display values from a source in form of tags
我正在使用 Bootstrap 标签输入插件。我想在指定的输入字段上以标签的形式显示一些值。这些值很可能以 json 格式从数据库中检索。我按照文档中所示使用添加方法
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples
但无法让它发挥作用。
我的 fiddle 演示在这里:https://jsfiddle.net/Lh4jy9d4/90/
$('input #expertise').tagsinput('add', {id: 1, text: 'javascript' })
如@Siavas 所述,根据您的标记过滤不正确。我将 $('input #expertise') 更改为 $('#expertise') 因为输入类型具有该 id.
您的示例无效,因为您忘记初始化 tagsInput。检查这个改编自他们的 git-hub 示例的工作片段。
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()
}
});
<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label class="col-lg-3 control-label">Expertise</label>
<div class="col-lg-5">
<input type="text" name="cities" id="expertise" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Interests</label>
<div class="col-lg-5">
<input type="text" name="cities1" id="interests" class="form-control" value="" data-role="tagsinput" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
我正在使用 Bootstrap 标签输入插件。我想在指定的输入字段上以标签的形式显示一些值。这些值很可能以 json 格式从数据库中检索。我按照文档中所示使用添加方法 https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples 但无法让它发挥作用。
我的 fiddle 演示在这里:https://jsfiddle.net/Lh4jy9d4/90/
$('input #expertise').tagsinput('add', {id: 1, text: 'javascript' })
如@Siavas 所述,根据您的标记过滤不正确。我将 $('input #expertise') 更改为 $('#expertise') 因为输入类型具有该 id.
您的示例无效,因为您忘记初始化 tagsInput。检查这个改编自他们的 git-hub 示例的工作片段。
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()
}
});
<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label class="col-lg-3 control-label">Expertise</label>
<div class="col-lg-5">
<input type="text" name="cities" id="expertise" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Interests</label>
<div class="col-lg-5">
<input type="text" name="cities1" id="interests" class="form-control" value="" data-role="tagsinput" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>