个人中心
gpt4 book ai didi

Bootstrap tagsinput not working(引导标记输入不起作用)

转载 作者：bug小助手 更新时间：2023-10-25 12:29:31 28 4
gpt4 key购买 nike



I just came across Bootstrap tagsinput and I am trying it out, but I cant seem to get it working.

我刚刚遇到了Bootstrap TagsInput，我正在尝试它，但我似乎无法让它工作。



I added the following at the top of my layout :

我在布局的顶部添加了以下内容：



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


And I added the following at the bottom of my layout :

我在布局的底部添加了以下内容：



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


Then in my partial page I added the following :

然后，在我的部分页面中，我添加了以下内容：



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


Below is an image of what is happening, instead of the tags showing:

下面是正在发生的事情的图像，而不是显示的标签：



enter image description here



To my understanding, this should work. What am I missing ?

据我所知，这应该是可行的。我错过了什么？


更多回答

Maybe not all of sources (script or css-file) are found on your web-server. Try to inspect a page by pressing Ctrl+Shift+I in Chrome

也许并不是所有的源代码(脚本或css文件)都在您的Web服务器上。尝试在Chrome中按Ctrl+Shift+I检查页面

what seems to be the problem.? input box not appearing? errors? can you provide a jsfiddle or image illustrating the problem

有什么问题吗？输入框不出现？错误？你能提供一个jsfiddle或图像说明这个问题吗？

I added an image of that was happening.

我添加了一张正在发生的图片。

Pls, give a link to your page

请给你的页面提供一个链接

I would love to, but unfortunately this is on my local.

我很想去，但不幸的是，这是在我的本地。

优秀答案推荐

I think that because it's a partial view and it appears after the library is loaded, it doesn't get applied.

我认为，因为它是一个部分视图，并且在加载库之后出现，所以它不会被应用。



I had exactly the same problem. My Index page had all the libraries included but the partial view never used them.

我也遇到了完全相同的问题。我的索引页面包含了所有的库，但部分视图从未使用过它们。



I had to add this to the partial view Razor to force it to apply after load.

我不得不将它添加到局部视图Razor中，以强制它在加载后应用。



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


Add this links in your page

在您的页面中添加此链接



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

Bootstrap-tag输入，github-参考



did you initialized your input like

您是否将您的输入初始化为



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


it's because old style using bootstrap class "label label-info". Try to change into "badge badge-info" class

这是因为老式使用引导类“Label Label-Info”。试着改成“徽章徽章-信息”课程


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

更多回答

Your demo is exactly what I want... I tried putting those in my PartialView and it didnt work. I also tried putting it in my Layout and it also didnt work...

你的样片正是我想要的.我试着把它们放到我的PartialView中，但没有起作用。我也试着把它放在我的布局中，也不起作用……

I retract my previous statement. I used the examples in your Demo and I got it working! Not sure what I did wrong previously, but I obviously did something that caused it not to work. Thank you!!

我收回我之前的声明。我使用了您的演示中的示例，并使其正常工作！不确定我之前做错了什么，但我显然做了一些导致它不起作用的事情。谢谢你！

@Daniel J Abraham how would you remove the comma automatically after tagging is added?

@Daniel J Abraham在添加标签后，您将如何自动删除逗号？

I previously tried $('#tags').tagsInput(); and tried your suggestion above as well, but makes no difference :(

我之前尝试了$(‘#tag’).tag sInput()；，也尝试了上面的建议，但没有什么不同：(

28 4 0
文章推荐： Spring Data JPA: FindBy on Join Column(Spring Data JPA：在联接列上查找)
文章推荐： How can i create a state machine using on the fly using yaml configuration, where i can store and use multiple config files(如何使用YAML配置动态创建状态机，在其中我可以存储和使用多个配置文件)
文章推荐： Why can't I press the ok button in pycharm setting of interpreter(为什么我不能在翻译器的PYCHAME设置中按OK按钮)
文章推荐： Using Google ID tokens to authenticate a Reactjs Frontend and FastAPI Backend(使用Google ID令牌对Reactjs前端和FastAPI后端进行身份验证)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com