Bootstrap/TagsInput Применение ко всем полям формы/Не отображается правильно

Question

У меня возникли проблемы с пониманием правильного применения Bootstrap/TagsВыход в форму.

Моя цель состоит в том, чтобы иметь форму с одним полем, используя TagsInput и другое поле, не использующее его.

Есть две проблемы:

1. TagsInput кажется применить к любому полю формы, а не только один я указываю с данными-роли = «tagsinput»
2. теги не остаются внутри из поле формы, так как поле формы всегда «впереди» тегов.

Вот код:

 var citynames = new Bloodhound({ 
 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
     prefetch: { 
 
      url: 'http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/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() 
 
     } 
 
     });

 .tt-query { 
 
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
 
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
 
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
 
     } 
 

 
     .tt-hint { 
 
     color: #999 
 
     } 
 

 
     .tt-menu { /* used to be tt-dropdown-menu in older versions */ 
 
     width: 422px; 
 
     margin-top: 4px; 
 
     padding: 4px 0; 
 
     background-color: #fff; 
 
     border: 1px solid #ccc; 
 
     border: 1px solid rgba(0, 0, 0, 0.2); 
 
     -webkit-border-radius: 4px; 
 
      -moz-border-radius: 4px; 
 
       border-radius: 4px; 
 
     -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
 
      -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
 
       box-shadow: 0 5px 10px rgba(0,0,0,.2); 
 
     } 
 

 
     .tt-suggestion { 
 
     padding: 3px 20px; 
 
     line-height: 24px; 
 
     } 
 

 
     .tt-suggestion.tt-cursor,.tt-suggestion:hover { 
 
     color: #fff; 
 
     background-color: #0097cf; 
 

 
     } 
 

 
     .tt-suggestion p { 
 
     margin: 0; 
 
     } 
 
     
 
     .bootstrap-tagsinput{ 
 
      width: 40%; 
 
      display: block; 
 
     } 
 
     
 
     .twitter-typeahead { 
 
      width: 40%; 
 
      display: block;    
 
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">  
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/themes/github.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.js"></script> 
 
<form class="form-inline" role="form" action="/items/create", method="post"> 
 
     <div class="form-group"> 
 
      <label for="title">Title (should be no tags input):</label> 
 
      <input type="text" class="form-control" id="title" name="title"> 
 
     <div class="form-group"> 
 
      <label for="tags"> Tags (should have tags input):</label> 
 
      <input type="text" class="form-control" id="tags" name="tags" data-role="tagsinput"> 
 
     <button type="submit" class="btn btn-default"> Submit</button> 
 
    </form>

Вот JSFiddle с моим кодом: https://jsfiddle.net/gg6rwmwa/1/

Я новичок в JavaScript/CSS, поэтому любое руководство будет оценил, где я делаю что-то неправильно.

Я нашел несколько похожих вопросов с stackoverflow, но никто, казалось, не ударил по этим двум точкам точно (и предоставил ответ).

Спасибо за помощь!

Answer 1

1. Вы создали две дивы внутри класса «форм-инлайн», и они оба имели действие = «/ пункты/создать» и метод = «пост» атрибуты. Чтобы исправить это, просто отделите разные поля, как показано ниже.

2. Это может быть проблема с CDN, которую вы используете. Я нашел другой на formvalidation.io, который, кажется, работает очень хорошо. Вы можете изменить его в соответствии с вашими потребностями.

Редактировать

Мы также должны выбрать форму метки ввода и сделать соответствующий яваскрипт обработки внутри этого. Каждое поле ввода становилось полем ввода тега, потому что мы забывали добавлять селектор $ ('# TagsInputForm') перед выполнением наших манипуляций.

HTML:

<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" /> 
<script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script> 

<form> 
    <fieldset class="form-group"> 
    <label for="formGroupExample">No tags</label> 
    <input type="text" class="form-control" id="formGroupExample"> 
    </fieldset> 
    <fieldset class="form-group"> 
    <label for="formGroupExample2">No tags</label> 
    <input type="text" class="form-control" id="formGroupExample2"> 
    </fieldset> 
</form> 
<form id="TagsInputForm" method="post" class="form-horizontal"> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Tag input</label> 
     <div class="col-sm-10"> 
      <input type="text" name="tags" class="form-control" 
        value="Tag" data-role="tagsinput" /> 
     </div> 
    </div> 
    </form> 
</form> 

JS:

$(document).ready(function() { 
    $('#TagsInputForm') { 
     var citynames = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     prefetch: { 
      url: 'https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/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() 
     }} 
     }); 
     });