在打字机前不工作的引导Tagsinput

Question

这是与http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/的“引导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']
    }
});

我分别尝试了文档页和预先输入文档页。但没有找到任何解决办法。实际上，我正在测试这个简单的代码，因此我需要为类似的事情使用一个数据库。但即使是它也不适用于本地数据。

Answer 1

这里是一个用于引导3的标签输入示例，它与typeahead.js:一起工作

图书馆：

• http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/
• http://twitter.github.io/typeahead.js/
• (很明显，Bootstrap 3和jQuery)

有几件事要注意：

• 这是为标记输入的多个实例编写的(但仍然适用于一个实例)
• 模糊的未完成输入
• 任何无效的条目在添加时都会被删除，并且会启动一个警告，并这样说。

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', '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', '');
        });
    });

});

Answer 2

这个特性从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希望，这可以帮助，这在我的本地工作。