使用Typeahead的Bootstrap Tagsinput不起作用
这是参考http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/中的“Bootstrap Tagsinput”
使用的插件:(最新版本）
- Bootstrap 3
- typeahead.js
- 引导-tagsinput.min.js
我想要的是使用Typeahead输入字段来添加标签。
jQuery部分如下。
$('#tagsinput').tagsinput({ typeahead: { name: 'towns', local: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'] } });
我分别尝试了文档页面和预先输入文档页面。 但没有找到任何解决方案。 我实际上正在测试这个简单的代码，所以我需要使用数据库来解决类似问题。 但即使它不适用于本地数据。
以下是bootstrap 3与typeahead.js一起使用的tagsinput示例：
图书馆：
- http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/
- http://twitter.github.io/typeahead.js/
- （显然，Bootstrap 3和jQuery）
有几点需要注意：
- 这是为多个tagsinput实例编写的（但仍然适用于一个）
- 未完成的输入清晰模糊
- 添加时删除任何无效条目，并启动警报
HTML：
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', 'Washington', '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', ''); }); }); });
此function自3.0以来已被删除。 http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/所以你必须单独包含typeahead.js http://getbootstrap.com/2.3.2/assets/js/bootstrap- typeahead.js希望这可以帮助，这在我的本地工作。