jquery - Bootstrap Tagsinput 与 Typeahead 不起作用

Question

这是引用 http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/ 中的“Bootstrap Tagsinput”

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

• Bootstrap 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']
    }
});

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

Answer 1

以下是 bootstrap 3 的 taginput 与 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', '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', '');
        });
    });

});