使用Typeahead的Bootstrap Tagsinput不起作用

Question

這是參考http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/中的“Bootstrap Tagsinput”

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

• Bootstrap 3
• typeahead.js
• 引導-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與typeahead.js一起使用的tagsinput示例：

圖書館：

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

});

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希望這可以幫助，這在我的本地工作。