twitter-bootstrap Bootstrap - 使用标签输入自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19722932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - AutoComplete with TagsInput
提问by Rockyy
Hi I want to use the autocomplete feature along with tagsinput with Bootstrap I have an external json file too. I had added the external json also how it will look like.. can any one help me out thanks Refrence Links http://timschlechter.github.io/bootstrap-tagsinput/examples/
嗨，我想在 Bootstrap 中使用自动完成功能和标签输入，我也有一个外部 json 文件。我已经添加了外部 json 以及它的外观.. 任何人都可以帮助我谢谢参考链接http://timschlechter.github.io/bootstrap-tagsinput/examples/
Code
代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-tagsinput.css" rel="stylesheet" />
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap-tagsinput.min.js"></script>
<script>
$('input').tagsinput({
typeahead: {
source: function (typehead, query)
{
$.ajax({
url: "http://localhost:56558/keywords/test.html",
dataType: "json",
success: function(data) {
var return_list = [], i = data.length;
while (i--) {
return_list[i] = { Name: data[i].value, value: data[i].id };
}
typeahead.process(return_list);
}
});
}
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" data-role="tagsinput" placeholder="Add tags" />
</div>
</form>
</body>
</html>
[ { "id": "Netta rufina", "label": "Red-crested Pochard", "value": "Red-crested Pochard" }, { "id": "Sterna sandvicensis", "label": "Sandwich Tern", "value": "Sandwich Tern" }, { "id": "Saxicola rubetra", "label": "Whinchat", "value": "Whinchat" }, { "id": "Saxicola rubicola", "label": "European Stonechat", "value": "European Stonechat" }, { "id": "Lanius senator", "label": "Woodchat Shrike", "value": "Woodchat Shrike" }, { "id": "Coccothraustes coccothraustes", "label": "Hawfinch", "value": "Hawfinch" }, { "id": "Ficedula hypoleuca", "label": "Eurasian Pied Flycatcher", "value": "Eurasian Pied Flycatcher" }, { "id": "Sitta europaea", "label": "Eurasian Nuthatch", "value": "Eurasian Nuthatch" }, { "id": "Pyrrhula pyrrhula", "label": "Eurasian Bullfinch", "value": "Eurasian Bullfinch" }, { "id": "Muscicapa striata", "label": "Spotted Flycatcher", "value": "Spotted Flycatcher" }, { "id": "Carduelis chloris", "label": "European Greenfinch", "value": "European Greenfinch" }, { "id": "Carduelis carduelis", "label": "European Goldfinch", "value": "European Goldfinch" } ]
回答by tivoni
Apologize in advance - this should be read as a comment, not an answer (my rank isn't high enough to comment).
提前道歉 - 这应该被视为评论，而不是答案（我的排名不够高，无法发表评论）。
Corey's answer is perfect for typeahead ver 0.9, where the 'setQuery' method exists. Saying that, there's a problem in typeahead 1.0: 'setQuery' no longer exists. Looks like it's functionality was replaced by 'val'. I was trying to get it to work and there seem to be an issue where the class 'tt-hint' does not get cleared when tags are selected, causing jumbled input field. Has anyone else bumped into this?
Corey 的答案非常适合 0.9 版的预输入，其中存在“setQuery”方法。也就是说，typeahead 1.0 存在一个问题：'setQuery' 不再存在。看起来它的功能被“val”取代了。我试图让它工作，但似乎存在一个问题，即选择标签时类 'tt-hint' 没有被清除，导致输入字段混乱。有没有其他人碰到过这个？
回答by CaptRisky
Not sure if this will help but had a similar issue and this is the code that I got to work for me.
不确定这是否会有所帮助，但有类似的问题，这是我必须对我来说有效的代码。
<input id="my-tags" type="text" placeholder="Add tags" />
<script type="text/javascript">
var colors = ["red", "blue", "green", "yellow", "brown", "black"];
var elt = $('#my-tags');
elt.tagsinput('input').typeahead({
local: colors,
prefetch: '/assets/data/countries.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {
this.tagsinput('add', datum.value);
this.tagsinput('input').typeahead('setQuery', '');
}, elt));
</script>
Now Im using bootstrap 3 and it no longer has typeahead and you have to include twitters typeahead that is separate from here
现在我使用 bootstrap 3，它不再有提前输入，你必须包含与这里分开的 twitters 提前输入
http://twitter.github.io/typeahead.js/
http://twitter.github.io/typeahead.js/
I see you didn't have that included, maybe thats all it is.
我看到你没有包括在内，也许仅此而已。
HTH
HTH
Also you will have to add css
您还必须添加 css
/*------ typeahead ------*/
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #9FDD48, #8CC43E);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9FDD48), to(#8CC43E));
background-image: -webkit-linear-gradient(top, #9FDD48, #8CC43E);
background-image: -o-linear-gradient(top, #9FDD48, #8CC43E);
background-image: linear-gradient(to bottom, #9FDD48, #8CC43E);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9FDD48', endColorstr='#ff8CC43E', GradientType=0)
}
.twitter-typeahead .tt-hint {
/*display: none;*/ your choice here...
}
.twitter-typeahead .hint-small {
height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
line-height: 1.5;
}
.twitter-typeahead .hint-large {
height: 45px;
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
line-height: 1.33;
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #9FDD48, #8CC43E);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9FDD48), to(#8CC43E));
background-image: -webkit-linear-gradient(top, #9FDD48, #8CC43E);
background-image: -o-linear-gradient(top, #9FDD48, #8CC43E);
background-image: linear-gradient(to bottom, #9FDD48, #8CC43E);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9FDD48', endColorstr='#ff8CC43E', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
