Bootstrap Tagsinput with Typeahead not working

Question

This is with reference to the "Bootstrap Tagsinput" from http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/

Plugins used: (latest versions of)

• Bootstrap 3
• typeahead.js
• bootstrap-tagsinput.min.js

What I wanted is to use Typeahead to input field to add tags.

<div class="input-group col-sm-4">
    <input type="text" class="form-control" id="tagsinput" />
</div>

The jQuery part is below.

$('#tagsinput').tagsinput({
    typeahead: {
        name: 'towns',
        local: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
    }
});

I tried the documentation page and typeahead documentation pages separately. But didn't find any solution. I am actually testing this simple code so that I need to use a database for similar matter. But even it doesn't work with local data.

Answer 1

Here is an example of tagsinput for bootstrap 3 working together with typeahead.js:

Libraries:

• http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/
• http://twitter.github.io/typeahead.js/
• (and, obviously, Bootstrap 3 and jQuery)

A few things to note:

• this was written for multiple instances of tagsinput (but should still work for one)
• unfinished inputs clear on blur
• any invalid entries are removed upon adding and an alert is kicked off saying so

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

This feature has been removed since 3.0. http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ So you have to include the typeahead.js individually http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js Hope this can help and this works in my local.