Bootstrap tagsinput typeahead not working

bootstrap-tags-input, twitter-bootstrap, twitter-bootstrap-3

Solution

I've been struggling with this all day too, pulling in crumbs of data from here there and everywhere. I created a bare-bones project to remove all external influences until I got it working, and I was then able to transfer that across to my project successfully.

Here is my bare-bones project that you should be able to use to prove you can get the concept working, and as a working example to compare to your project.

Create yourself an html file and paste this in.

<!DOCTYPE html>
<html>
<head>
    <title>TagsInput and TypeAhead TOGETHER!</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap-tagsinput.css">
</head>
<body>
    <h1>TagsInput and TypeAhead TOGETHER!</h1>

    <select id="Country">
        <option>UK Cars</option>
        <option>German Cars</option>
    </select>

    <input type="text" id="carsSearch" placeholder="Type Car Names" />

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-tagsinput.min.js"></script>
    <script type="text/javascript" src="js/bootstrap3-typeahead.js"></script>
    <script type="text/javascript" src="js/tagsinput and typeahead.js"></script>
</body>
</html>

Create a js folder and a file called tagsinput and typeahead.js and paste this in.

$(document).ready(
    function () {
        // Call the data population
        bindCarList();
    }
);

bindCarList = function () {
    // Call TagsInput on the input, and set the typeahead source to our data
    $('#carsSearch').tagsinput({
        typeahead: {
            source: function () {
                if ($('#Country').val() == "UK Cars") {
                    return ["Lotus", "TVR", "Jaguar", "Noble", "Land Rover", "Rover"];
                } else {
                    return ["BMW", "Audi", "Volkswagen", "Mercedes-Benz"];
                }
            }
        }
    });

    $('#carsSearch').on('itemAdded', function (event) {
        // Hide the suggestions menu
        $('.typeahead.dropdown-menu').css('display', 'none')
        // Clear the typed text after a tag is added
        $('.bootstrap-tagsinput > input').val("");
    });
}

You will need to download a few files, but I've used CDNs where possible to keep it to a minimum.

- /css/bootstrap-tagsinput.css and

- /js/bootstrap-tagsinput.min.js from https://github.com/timschlechter/bootstrap-tagsinput/tree/master/src

- /js/bootstrap3-typeahead.js from https://github.com/bassjobsen/Bootstrap-3-Typeahead

It's not perfect. I had to use a workaround to clear the search text and hide the list once a tag is added. You can't tab out of the input though, which isn't great. It's pretty good though, and maybe someone can improve upon it.

Problem

I have this input which is using the bootstrap-tagsinputs plugin, the problem is that I want it to autocomplete the tags, and it is not doing it! The tags part works perfect ;) but the autocomplete part doesn´t :( Anyone has an idea why?, the examples are the same as the ones in the plugins page: http://timschlechter.github.io/bootstrap-tagsinput/examples/ This is my code: ``` <input id="tags-text-input"></input> $("#tags-text-input").ready(function () { $("#tags-text-input").tagsinput(); $("#tags-text-input").typeahead({ typeahead: ["I'm done trying...", "Jhon", "Smith"] }); }); ``` I've already included the typeahead plugin and the tagsinput plugin. What I'm I doing wrong? Thanks in advance.

Original source

Related problems