Bootstrap tagsinput не работает

Я только что наткнулся на 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">

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

введите здесь описание изображения

В моем понимании, это должно работать. Что мне не хватает?


css twitter-bootstrap bootstrap-tags-input
person AxleWack    schedule 02.11.2016    source источник
comment
Возможно не все исходники (скрипт или css-файл) находятся на вашем веб-сервере. Попробуйте проверить страницу, нажав Ctrl+Shift+I в Chrome.   -  person Banzay    schedule 02.11.2016
comment
В чем проблема.? поле ввода не появляется? ошибки? можете ли вы предоставить jsfiddle или изображение, иллюстрирующее проблему   -  person mkawa    schedule 02.11.2016
comment
Я добавил изображение происходящего.   -  person AxleWack    schedule 02.11.2016
comment
Пожалуйста, дайте ссылку на вашу страницу   -  person Banzay    schedule 02.11.2016
comment
Я бы с удовольствием, но, к сожалению, это на моем местном.   -  person AxleWack    schedule 02.11.2016
comment
вы добавили ссылку jquery.? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   -  person mkawa    schedule 02.11.2016
comment
Попробовал добавить сейчас, безрезультатно. Я собираюсь попробовать создать новый проект (чистый проект) и посмотреть, работает ли он, если да, то это что-то конфликтующее...   -  person AxleWack    schedule 02.11.2016
comment
Хорошо, я создал новый проект MVC и все еще сижу с той же проблемой... Теперь я обновил свой бутстрап до Bootstrap 3.3.7 в надежде, что это проблема, но все еще ничего   -  person AxleWack    schedule 02.11.2016

Ответы (3)


arrow_upward
3
arrow_downward

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

<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>

ДЕМО

Bootstrap — tagsinput , Github — ссылка

person Daniel J Abraham    schedule 02.11.2016
comment
Ваша демонстрация - это именно то, что я хочу ... Я попытался поместить их в свой PartialView, и это не сработало. Я также пытался поместить его в свой макет, и это также не сработало... - person AxleWack; 02.11.2016
comment
Я отказываюсь от своего предыдущего заявления. Я использовал примеры в вашей демонстрации, и у меня все заработало! Не уверен, что я сделал неправильно раньше, но я явно сделал что-то, из-за чего это не сработало. Спасибо!! - person AxleWack; 02.11.2016
comment
@Daniel J Abraham, как бы вы удалили запятую автоматически после добавления тегов? - person Fastidious; 17.06.2021

arrow_upward
3
arrow_downward

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

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

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

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

arrow_upward
1
arrow_downward

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

$('input').tagsinput({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});
person Maheskumar Subramani    schedule 02.11.2016
comment
Ранее я пробовал $('#tags').tagsInput(); и попробовал ваше предложение выше, но без разницы :( - person AxleWack; 02.11.2016