jquery – 引导标签输入与类型头不工作

这是参考 http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/的“Bootstrap Tagsinput”

使用的插件：(最新版本)

引导3
> typeahead.js
> bootstrap-tagsinput.min.js

我想要的是使用Typeahead输入字段来添加标签.

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

});