tagsinput 的基本示例不适用于 Bootstrap 3
Basic example of tagsinput not working with Bootstrap 3
刚开始客户端编程,所以这可能是初学者的错误。我正在尝试让 examples of the bootstrap tagsinput 插件工作。他们几乎这样做,除了标记中提供的值(例如 value="Amsterdam,Washington")不能使用 Backspace 删除。当我的测试页面加载时,它们确实显示为标签,但只能通过单击每个标签上的 "x" 来删除它们。
我通过输入创建的任何新标签都按预期工作(可以通过单击 x 或退格键删除)。
看起来初始标签在 div 元素(class bootstrap-tagsinput)中结束,除了它们之外,还包含另一个 div元素(也是 class bootstrap-tagsinput)这是添加新(输入)标签的地方。
这与示例的行为不同,在示例中,包括初始标签在内的所有标签都可以通过按退格键来删除。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/bootstrap-tagsinput.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-tagsinput.js"></script>
<script src="Scripts/typeahead.bundle.min.js"></script>
<script src="TagsInputTest.js"></script>
<style>
/*.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-dropdown-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;
}
/*.bootstrap-tagsinput {
width: 100% !important;
}*/
.tt-suggestion > p {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: nowrap;
}
.tt-suggestion > p:hover,
.tt-suggestion > p:focus,
.tt-suggestion.tt-cursor p {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #428bca;
}
</style>
</head>
<body>
<!--<div class="clearfix"> </div>-->
<div class="container">
<div class="row">
<h3>select</h3>
<select multiple data-role="tagsinput">
<option value="Amsterdam">Amsterdam</option>
<option value="Washington">Washington</option>
<option value="Sydney">Sydney</option>
<option value="Beijing">Beijing</option>
<option value="Cairo">Cairo</option>
</select>
<br />
<h3>input</h3>
<input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
</div>
</div>
</body>
</html>
$(document).ready(function () {
var citynames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: '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()
},
maxTags: 3
});
});
如有任何建议,我们将不胜感激。
我认为您需要做的不是使用 html value
属性设置初始值而是使用 javascript 设置初始值,因此插件可以理解如何对待它们,例如:
$('input').tagsinput({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
},
maxTags: 3
});
$('input').tagsinput('add', 'Amsterdam').tagsinput('add', 'Washington');
问题(无法删除通过 value 属性添加的标签)在我向输入元素添加唯一 ID 后消失了。不知道为什么这对我的情况有帮助,因为示例代码不使用唯一 ID。它确实从测试页标记中删除了重复的 div 和 class of bootstrap-tagsinput。
刚开始客户端编程,所以这可能是初学者的错误。我正在尝试让 examples of the bootstrap tagsinput 插件工作。他们几乎这样做,除了标记中提供的值(例如 value="Amsterdam,Washington")不能使用 Backspace 删除。当我的测试页面加载时,它们确实显示为标签,但只能通过单击每个标签上的 "x" 来删除它们。
我通过输入创建的任何新标签都按预期工作(可以通过单击 x 或退格键删除)。
看起来初始标签在 div 元素(class bootstrap-tagsinput)中结束,除了它们之外,还包含另一个 div元素(也是 class bootstrap-tagsinput)这是添加新(输入)标签的地方。
这与示例的行为不同,在示例中,包括初始标签在内的所有标签都可以通过按退格键来删除。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/bootstrap-tagsinput.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-tagsinput.js"></script>
<script src="Scripts/typeahead.bundle.min.js"></script>
<script src="TagsInputTest.js"></script>
<style>
/*.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-dropdown-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;
}
/*.bootstrap-tagsinput {
width: 100% !important;
}*/
.tt-suggestion > p {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: nowrap;
}
.tt-suggestion > p:hover,
.tt-suggestion > p:focus,
.tt-suggestion.tt-cursor p {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #428bca;
}
</style>
</head>
<body>
<!--<div class="clearfix"> </div>-->
<div class="container">
<div class="row">
<h3>select</h3>
<select multiple data-role="tagsinput">
<option value="Amsterdam">Amsterdam</option>
<option value="Washington">Washington</option>
<option value="Sydney">Sydney</option>
<option value="Beijing">Beijing</option>
<option value="Cairo">Cairo</option>
</select>
<br />
<h3>input</h3>
<input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
</div>
</div>
</body>
</html>
$(document).ready(function () {
var citynames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: '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()
},
maxTags: 3
});
});
如有任何建议,我们将不胜感激。
我认为您需要做的不是使用 html value
属性设置初始值而是使用 javascript 设置初始值,因此插件可以理解如何对待它们,例如:
$('input').tagsinput({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
},
maxTags: 3
});
$('input').tagsinput('add', 'Amsterdam').tagsinput('add', 'Washington');
问题(无法删除通过 value 属性添加的标签)在我向输入元素添加唯一 ID 后消失了。不知道为什么这对我的情况有帮助,因为示例代码不使用唯一 ID。它确实从测试页标记中删除了重复的 div 和 class of bootstrap-tagsinput。