CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-2
Kuttan Sujith
Kuttan Sujith

Reputation: 7979

bootstrap-tagsinput do not worked

I can see a good control

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

But based on it i tried codes below it didn't work , Can any one help me 

<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>

Upvotes: 1

Views: 5464

Answers (2)

ppollono
ppollono

Reputation: 3642

I use the same plug-in in a project the problem with the typeahead source it need to be a json with simple elements no objects

Take a look at this fiddle, Im sure It will help you

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

Upvotes: 0

crafter
crafter

Reputation: 6296

This is because of a know bug : https://github.com/TimSchlechter/bootstrap-tagsinput/issues/42

To resolve, do not use data-role="tagsinput" and $('input').tagsinput(...) together.

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

Upvotes: 1

Related Questions