title: Basic example of tagsinput not working with Bootstrap 3
body: <p>Just getting started with client programming, so this might be a beginner's error. I am trying to get the <a href="http://timschlechter.github.io/bootstrap-tagsinput/examples/" rel="nofollow noreferrer">examples of the bootstrap tagsinput</a> 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.</p>
  
  <p>Any new tags that I create by typing them in, work as expected (can be deleted by clicking x or by backspace).</p>
  
  <p>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.</p>
  
  <p>This is different than the behavior of the examples where all tags including the initial ones can be deleted by hitting backspace.</p>
  
  <p><a href="https://i.stack.imgur.com/CY4cx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CY4cx.png" alt="screenshot of my test page as shown in the browser"></a></p>
  
  <p><a href="https://i.stack.imgur.com/yUt15.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yUt15.png" alt="screenshot of the two divs with class bootstrap-tagsinput"></a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="Content/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;link href="Content/bootstrap-theme.min.css" rel="stylesheet" /&gt;
      &lt;link href="Content/bootstrap-tagsinput.css" rel="stylesheet" /&gt;
      &lt;script src="Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/bootstrap-tagsinput.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/typeahead.bundle.min.js"&gt;&lt;/script&gt;
      &lt;script src="TagsInputTest.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          /*.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 &gt; p {
              display: block;
              padding: 3px 20px;
              clear: both;
              font-weight: normal;
              line-height: 1.428571429;
              color: #333333;
              white-space: nowrap;
          }
  
              .tt-suggestion &gt; p:hover,
              .tt-suggestion &gt; p:focus,
              .tt-suggestion.tt-cursor p {
                  color: #ffffff;
                  text-decoration: none;
                  outline: 0;
                  background-color: #428bca;
              }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--&lt;div class="clearfix"&gt;&amp;nbsp;&lt;/div&gt;--&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;h3&gt;select&lt;/h3&gt;
              &lt;select multiple data-role="tagsinput"&gt;
                  &lt;option value="Amsterdam"&gt;Amsterdam&lt;/option&gt;
                  &lt;option value="Washington"&gt;Washington&lt;/option&gt;
                  &lt;option value="Sydney"&gt;Sydney&lt;/option&gt;
                  &lt;option value="Beijing"&gt;Beijing&lt;/option&gt;
                  &lt;option value="Cairo"&gt;Cairo&lt;/option&gt;
              &lt;/select&gt;
              &lt;br /&gt;
              &lt;h3&gt;input&lt;/h3&gt;
              &lt;input type="text" value="Amsterdam,Washington" data-role="tagsinput" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  $(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
  });
  });
  </code></pre>
  
  <p>Any advice would be appreciated.</p>