使用Typeahead的Bootstrap Tagsinput不起作用 [英] Bootstrap Tagsinput with Typeahead not working

问题描述

这是参考 http：// timschlechter的Bootstrap Tagsinput。 github.io/bootstrap-tagsinput/examples/bootstrap3/

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

Plugins used: (latest versions of)

• Bootstrap 3


• typeahead.js


• bootstrap-tagsinput.min.js

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

What I wanted is to use Typeahead to input field to add tags.

<div class="input-group col-sm-4">
    <input type="text" class="form-control" id="tagsinput" />
</div>

jQuery部分在下面。

The jQuery part is below.

$('#tagsinput').tagsinput({
    typeahead: {
        name: 'towns',
        local: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
    }
});

我分别尝试了文档页面和打印文档页面。但没有找到任何解决方案。我实际上正在测试这个简单的代码，所以我需要使用数据库来解决类似问题。但即使它不适用于本地数据。

I tried the documentation page and typeahead documentation pages separately. But didn't find any solution. I am actually testing this simple code so that I need to use a database for similar matter. But even it doesn't work with local data.

推荐答案

以下是bootstrap 3一起工作的tagsinput示例with typeahead.js：

图书馆：

• http://timschlechter.github.io/bootstrap-tagsinput/examples / bootstrap3 /


• http：// twitter。 github.io/typeahead.js/


• （显然，Bootstrap 3和jQuery）

需要注意的一些事项：

• 这是为多个tagsinput实例编写的（但仍然可以工作一个）


• 未完成的输入清除模糊


• 添加后删除任何无效的条目并启动警报说明

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

});

这篇关于使用Typeahead的Bootstrap Tagsinput不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！