bootstrap-tagsinput do not worked

Question 1

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

Question 2

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