Twitter Bootstrap Question posted in

Twitter bootstrap – Basic example of tagsinput not working with Bootstrap 3

Just getting started with client programming, so this might be a beginner’s error. I am trying to get the examples of the bootstrap tagsinput plugin to work. They almost do, except that the values provided in the markup (e.g. value=”Amsterdam,Washington”) cannot be deleted using Backspace. They do show up as tags when my test page loads, but they can only be deleted by clicking the “x” on each tag.

Any new tags that I create by typing them in, work as expected (can be deleted by clicking x or by backspace).

It looks that the initial tags end up in a div element (class bootstrap-tagsinput) that, in addition to them, also contains another div element (also class bootstrap-tagsinput) which is where the new (typed-in) tags get added.

This is different than the behavior of the examples where all tags including the initial ones can be deleted by hitting backspace.

screenshot of my test page as shown in the browser

screenshot of the two divs with class bootstrap-tagsinput

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-tagsinput.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/bootstrap-tagsinput.js"></script>
    <script src="Scripts/typeahead.bundle.min.js"></script>
    <script src="TagsInputTest.js"></script>
    <style>
        /*.bootstrap-tagsinput {
            width: 100%;
        }*/

        .accordion {
            margin-bottom: -3px;
        }

        .accordion-group {
            border: none;
        }

        .twitter-typeahead .tt-query,
        .twitter-typeahead .tt-hint {
            margin-bottom: 0;
        }

        .twitter-typeahead .tt-hint {
            display: none;
        }

        .tt-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 160px;
            padding: 5px 0;
            margin: 2px 0 0;
            list-style: none;
            font-size: 14px;
            background-color: #ffffff;
            border: 1px solid #cccccc;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            background-clip: padding-box;
        }

        /*.bootstrap-tagsinput {
            width: 100% !important;
        }*/

        .tt-suggestion > p {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.428571429;
            color: #333333;
            white-space: nowrap;
        }

            .tt-suggestion > p:hover,
            .tt-suggestion > p:focus,
            .tt-suggestion.tt-cursor p {
                color: #ffffff;
                text-decoration: none;
                outline: 0;
                background-color: #428bca;
            }
    </style>
</head>
<body>
    <!--<div class="clearfix">&nbsp;</div>-->
    <div class="container">
        <div class="row">
            <h3>select</h3>
            <select multiple data-role="tagsinput">
                <option value="Amsterdam">Amsterdam</option>
                <option value="Washington">Washington</option>
                <option value="Sydney">Sydney</option>
                <option value="Beijing">Beijing</option>
                <option value="Cairo">Cairo</option>
            </select>
            <br />
            <h3>input</h3>
            <input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
        </div>
    </div>
</body>
</html>

$(document).ready(function () {
var citynames = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: 'assets/citynames.json',
        filter: function (list) {
            return $.map(list, function (cityname) {
                return { name: cityname };
            });
        }
    }
});
citynames.initialize();

$('input').tagsinput({
    typeaheadjs: {
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        source: citynames.ttAdapter()
    },
    maxTags: 3
});
});

Any advice would be appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The problem (not being able to delete tags added through the value attribute) went away after I added a unique id to my input element. Don't know why that helps in my case as the example code does not use unique IDs. It definitely removed the duplicate div with class of bootstrap-tagsinput from the test page markup.


  2. 0

    I think what you are going to have to do, instead of setting the intiial value with the html value attribute is to set the initial value using javascript , so the plugin can understand to treat them as such, ex:

    $('input').tagsinput({
    typeaheadjs: {
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        source: citynames.ttAdapter()
    },
    maxTags: 3
});
$('input').tagsinput('add', 'Amsterdam').tagsinput('add', 'Washington');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search