Bootstrap Tags Ошибка ввода, невозможно установить значение текстового поля с помощью - PullRequest
Новая
       38

Bootstrap Tags Ошибка ввода, невозможно установить значение текстового поля с помощью

0 голосов
/ 07 июня 2018

Я пытаюсь создать область ввода, которая позволяет пользователям создавать теги.Я нашел входные теги начальной загрузки и попытался использовать его.Это работает, но когда я пытаюсь установить данные в поле ввода, это не работает вообще.Вот мой код: 

 <input id="tagsdata" type="text" class="form-control" data-role="tagsinput"  placeholder="Add tags"/>


  $('#tagsdata').val(response.data.tags); // response.data.tags is a string which can be say :  "tags" or "tag1,tag2,tag3" etc. on pageload.

Я также включил все необходимые сценарии в файл cshtml. 

<script src="~/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>    
<link href="~/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" />
<link href="~/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput-typeahead.css" rel="stylesheet" />

(я что-то не пропустил, верно?)

Также, как я могу настроить область ввода тегов?в настоящее время теги поставляются с синим цветом фона.Пожалуйста, помогите.

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Для добавления предметов вам нужно использовать: 

$('#tagsdata').tagsinput('add', 'some tag');

Так что если вам нужно несколько, вы можете зациклить и добавить один за другим.Вот много примеров, которые помогут вам: https://bootstrap -tagsinput.github.io / bootstrap-tagsinput / examples /

Вы можете дать другой класс в зависимости от свойства, вот рабочий примерс сайта: 

<script>
var elt = $('#tagsdata');
elt.tagsinput({
  tagClass: function(item) {
    switch (item.continent) {
      case 'Europe'   : return 'label label-primary';
      case 'America'  : return 'label label-danger label-important';
      case 'Australia': return 'label label-success';
      case 'Africa'   : return 'label label-default';
      case 'Asia'     : return 'label label-warning';
    }
  },
  itemValue: 'value',
  itemText: 'text'
});
elt.tagsinput('add', { "value": 1 , "text": "Amsterdam"   , "continent": "Europe"    });
elt.tagsinput('add', { "value": 4 , "text": "Washington"  , "continent": "America"   });
elt.tagsinput('add', { "value": 7 , "text": "Sydney"      , "continent": "Australia" });
elt.tagsinput('add', { "value": 10, "text": "Beijing"     , "continent": "Asia"      });
elt.tagsinput('add', { "value": 13, "text": "Cairo"       , "continent": "Africa"    });
</script>
0 голосов
/ 07 июня 2018

Спасибо, что заглянули в этот вопрос, но у меня есть способ сделать это .. 

var temp = response.data.tags.split(",");
            for (var i = 0; i < temp.length; i++)
            {
                $('#tagsdata').tagsinput('add', temp[i]);
            }
...