这是参考
http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/的“Bootstrap Tagsinput”
使用的插件：(最新版本)
引导3
> typeahead.js
> bootstrap-tagsinput.min.js
<div class="input-group col-sm-4">
<input type="text" class="form-control" id="tagsinput" />
</div>
jQuery部分在下面.
$('#tagsinput').tagsinput({
typeahead: {
name: 'towns',local: ['Amsterdam','Washington','Sydney','Beijing','Cairo']
}
});
我分别尝试了文档页面和打字头文档页面.但没有找到任何解决方案.我实际上是测试这个简单的代码,所以我需要使用一个类似的事情的数据库.但即使它不适用于本地数据.
解决方法
这是一个引用3的标签输入的例子,它与typeahead.js一起工作：
图书馆：
> http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/
> http://twitter.github.io/typeahead.js/
(显然,Bootstrap 3和jQuery)
需要注意的几件事情
>这是为多个taginput实例编写的(但是应该仍然适用于一个)
>未完成的输入在模糊中清晰
>任何无效的条目在添加时都被删除,并且启动了一个警报
HTML：
<input type="text" class="stateinput" placeholder="Enter States" /><br /> <input type="text" class="stateinput" placeholder="Enter States" /><br /> <input type="text" class="stateinput" placeholder="Enter States" />
JavaScript的：
$(function () {
// function from typeahead.js example
var substringMatcher = function (strs) {
return function findMatches(q,cb) {
var matches,substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q,'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`,add it to the `matches` array
$.each(strs,function (i,str) {
if (substrRegex.test(str)) {
// the typeahead jQuery plugin expects suggestions to a
// JavaScript object,refer to typeahead docs for more info
matches.push({ value: str });
}
});
cb(matches);
};
};
var states = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','West Virginia','Wisconsin','Wyoming'
];
var tags = $('input.stateinput');
// initialize tagsinput for each stateinput classed input
tags.tagsinput();
$(tags).each(function (i,o) {
// grab the input inside of tagsinput
var taginput = $(o).tagsinput('input');
// ensure that a valid state is being entered
$(o).on('itemAdded',function (event) {
if (states.indexOf(event.item) < 0) {
$(o).tagsinput('remove',event.item);
alert(event.item + " is not a valid state");
}
});
// initialize typeahead for the tag input
taginput.typeahead({
hint: true,highlight: true,minLength: 1,autoselect: true
},{
name: 'states',displayKey: 'value',source: substringMatcher(states)
}).bind('typeahead:selected',$.proxy(function (obj,datum) {
// if the state is clicked,add it to tagsinput and clear input
$(o).tagsinput('add',datum.value);
taginput.typeahead('val','');
}));
// erase any entered text on blur
$(taginput).blur(function () {
taginput.typeahead('val','');
});
});
});
