Question

我可以看到一个好的控制

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

但基于它，我尝试下面的代码，它不起作用，任何人都可以帮助我

<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>

<script src="http://timschlechter.github.io/bootstrap-tagsinput/examples/bower_components/angular/angular.min.js"></script>
<script src="http://timschlechter.github.io/bootstrap-tagsinput/examples/bower_components/google-code-prettify-lite/prettify.js"></script>
<script src="http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap-2.3.2/js/bootstrap.min.js"></script>
<script src="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>
<script src="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput-angular.js"></script>

<body>
<br />
<input type="text" value="" data-role="tagsinput"  />
<br />
</body>
<script>
$('input').tagsinput({
  typeahead: {
    source: [{"value":1,"text":"Amsterdam"},
{"value":4,"text":"Washington"},
{"value":7,"text":"Sydney"},
{"value":10,"text":"Beijing"},
{"value":13,"text":"Cairo"}]
  }
});
</script>

Answer 1

这是因为知道错误： https://github.com/TimSchlechter/bootstrap-tagsinput/issues/42

要解决此问题，请不要将data-role =“tagsinput”和$（'input'）。tagsinput（...）一起使用。

Tagsinput is not a function, using bootstrap 3 and tags-input plugin

Answer 2

我在项目中使用相同的插件类型来源的问题需要是一个简单元素没有对象的json

看看这个小提琴，我相信它会帮助你

Fiddle

$('input').tagsinput({
    typeahead: {
        source: function (query, process) {
            cities = [];
            map = {};

            var data = [{
                "value": 1,
                    "text": "Amsterdam"
            }, {
                "value": 4,
                    "text": "Washington"
            }, {
                "value": 7,
                    "text": "Sydney"
            }, {
                "value": 10,
                    "text": "Beijing"
            }, {
                "value": 13,
                    "text": "Cairo"
            }];

            $.each(data, function (i, city) {
                map[city.text] = city;
                cities.push(city.text);
            });

            return (cities);
        }
    }
});

PreFetched Json

cities = [];
map = {};

var preFetchResult = function (query, callback) {
    $.get("/cities", {
        "data": query
    }, function (data) {
        $.each(data, function (i, city) {
            map[city.text] = city;
            cities.push(city.text);
        });
    });
};

preFetchResult.done(function (response) {
    $('input').tagsinput({
        typeahead: {
            source: function (query, process) {
                return (cities);
            }
        }
    });
});

bootstrap-tagsinput不起作用

2 个答案: