Jquery 标记输入不使用引导3的基本示例

刚刚开始客户端编程，所以这可能是初学者的错误。我正在尝试让插件工作。它们几乎可以，除了标记中提供的值（例如value=“Amsterdam，Washington”）不能使用Backspace删除。当我的测试页面加载时，它们确实显示为标记，但只能通过单击每个标记上的“x”来删除它们

我通过键入新标记创建的任何新标记都可以按预期工作（可以通过单击x或退格删除）

看起来，初始标记最终会出现在一个div元素（class bootstrap tagsinput）中，该元素除了包含它们之外，还包含另一个div元素（也是class bootstrap tagsinput），这就是添加新（键入的）标记的地方

这与示例的行为不同，示例中的所有标记（包括初始标记）都可以通过单击backspace删除

/*.引导标记输入{
宽度：100%；
}*/
.手风琴{
利润底部：-3px；
}
·手风琴组{
边界：无；
}
.twitter typeahead.tt query，
.twitter typeahead.tt提示{
页边距底部：0；
}
.twitter typeahead.tt提示{
显示：无；
}
.tt下拉菜单{
位置：绝对位置；
最高：100%；
左：0；
z指数：1000；
显示：无；
浮动：左；
最小宽度：160px；
填充：5px0；
边际：2px0；
列表样式：无；
字体大小：14px；
背景色：#ffffff；
边框：1px实心#中交；
边框：1px实心rgba（0,0,0,0.15）；
边界半径：4px；
-webkit盒阴影：0 6px 12px rgba（0,0,0,0.175）；
盒影：0 6px 12px rgba（0,0,0,0.175）；
背景剪辑：填充框；
}
/*.引导标记输入{
宽度：100%！重要；
}*/
.tt建议>p{
显示：块；
填充：3px20px；
明确：两者皆有；
字体大小：正常；
线高：1.428571429；
颜色：#333333；
空白：nowrap；
}
.tt建议>p：悬停，
.tt建议>p：重点，
.tt-suggestion.tt-p{
颜色：#ffffff；
文字装饰：无；
大纲：0；
背景色：#428bca；
}
选择
阿姆斯特丹
华盛顿
悉尼
北京
开罗


输入
$（文档）.ready（函数（）{
var citynames=新猎犬({
datumTokenizer:Bloodhound.tokenizers.obj.whitespace，
queryTokenizer:猎犬，标记，空白，
预取：{
url:'assets/citynames.json'，
过滤器：函数（列表）{
return$.map（列表，函数（cityname）{
返回{name:cityname}；
});
}
}
});
citynames.initialize（）；
$（'input'）.tagsinput({
typeaheadjs：{
名称：“城市名称”，
displayKey:'名称'，
valueKey:'名称'，
资料来源：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');

---

我认为您需要做的不是使用html

value

属性设置初始值，而是使用javascript设置初始值，这样插件就可以理解如何将其视为初始值，例如：

$('input').tagsinput({
    typeaheadjs: {
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        source: citynames.ttAdapter()
    },
    maxTags: 3
});
$('input').tagsinput('add', 'Amsterdam').tagsinput('add', 'Washington');

---

在我向输入元素添加了唯一id后，问题（无法删除通过value属性添加的标记）就消失了。我不知道为什么在我的例子中会有帮助，因为示例代码没有使用唯一的ID。它确实从测试页面标记中删除了具有引导标记输入类的重复div。

在我向输入元素添加了唯一id后，问题（无法删除通过value属性添加的标记）消失了。我不知道为什么在我的例子中会有帮助，因为示例代码没有使用唯一的ID。它确实从测试页面标记中删除了具有引导标记输入类的重复div。

根据您的建议更改JavaScript会导致错误：对象不支持属性或方法“tagsinput”根据您的建议更改JavaScript会导致错误：对象不支持属性或方法“tagsinput”