Question

我使用Tags-input bootstrap插件。这适用于typehead和Json Files但是在bootstrap 3中这个插件对我不起作用。

HTML：

<input class="form-control" type="text" />

JS：

$('input').tagsinput({
    typeahead: {
        source: function (query) {
            return $.get('https://raw.githubusercontent.com/TimSchlechter/bootstrap-tagsinput/master/examples/assets/citynames.json');
        }
    }
});

有什么问题？我该怎么办？

DEMO JSFIDDLE

Answer 1

尝试这个，它很容易使用它是jquery的标签输入。
这是Fiddle 的 HTML：

<p>This is a basic tag input: <input id="tag1" value="alpha,beta,gamma" /> </p>

<强> JS：

$('#tag1').tagsInput({ // my parameters here });

如果您仍想使用bootstrap标签输入，请检查此Question

Answer 2

随着typeahead.js plugin的发展，对typeahead的tagsinput pluging支持已过时，并且无法与最新版本一起使用。一种解决方案是在tagsinput插件的外侧实现typeahead.js，并严格利用tagsinput插件来标记部分。这是一个示例实现。

假设您的Json对象如下所示：

var a = [
    {
        'Key': '1',
        'Value': 'Alabama'
    },
    {
        'Key': '2',
        'Value': 'California'
    },
    {
        'Key': '3',
        'Value': 'New York'
    }];

然后您可以使用这样的方法来设置插件：

function addTypeAhead(elem) {
    var elt = $(elem);

    elt.tagsinput({
        itemValue: 'Key',
        itemText: 'Value',
        freeInput: false
    });

    elt.tagsinput('input').typeahead(null, {
        displayKey: 'Value',
        source: function(query, process) {
            // do your Ajax call here
            return $.get({
                url: yourUrl,
                data: { Query: query }
            }).done(function(msg) {
                process(msg.Data);
            }).fail(function(jqXhr, textStatus) {
                alert("Request failed: " + textStatus);
            });
        }
    }).bind('typeahead:selected', $.proxy(function (obj, selectedItem) {
        // add tag to tagsinput plugin
        this.tagsinput('add', selectedItem);
        // reset input of tagsinput plugin
        this.tagsinput('input').typeahead('val', '');
        // handle when user selects tag here
    }, elt));

    elt.on('itemRemoved', function (event) {
        // handle when user removes tag here
    });
}

tags-input插件不能与bootstrap 3一起使用

2 个答案: