Входные метки начальной загрузки не работают

Question

Я только что наткнулся на Bootstrap tagsinput и пробую его, но, похоже, не могу заставить его работать.

Я добавил следующее в верхней части моего макета:

<link rel="stylesheet" href="~/Scripts/bootstrap_tagsinput/bootstrap-tagsinput.css">

И я добавил следующее в нижней части моего макета:

<script src="~/Scripts/bootstrap_tagsinput/bootstrap-tagsinput.js"></script>

Затем на своей частичной странице я добавил следующее:

<input type="text" value="" data-role="tagsinput" id="tags" class="form-control">

Ниже приведено изображение происходящего вместо тегов, показывающих:

Насколько я понимаю, это должно работать. Что мне не хватает?

Answer 1

Добавить эту ссылку на вашей странице

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

DEMO

Bootstrap - tagsinput, Github - Ссылка

Answer 2

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

У меня была точно такая же проблема. На моей индексной странице были включены все библиотеки, но частичное представление их никогда не использовало.

Мне пришлось добавить это к частичному представлению Razor, чтобы заставить его применить после загрузки.

<script>
    $(function () {
        $('input[data-role=tagsinput]').tagsinput();
    }
    );
</script>

Answer 3

Вы инициализировали свой ввод как

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

Answer 4

это потому, что в старом стиле используется класс начальной загрузки «label label-info». Попробуйте перейти на класс «badge tag-info».

      $('.tags').tagsinput({
     tagClass: 'badge badge-info'
 });