jQuery标签插件tagsinput.js

所属分类:UI,输入-标签,自动完成

 42010  313  查看评论 (11)
分享到微信朋友圈
X
jQuery标签插件tagsinput.js ie兼容6

使用方法

首先,将Javascript和CSS文件添加到您的标记中:

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

在表单中创建一个包含以逗号分隔的标记列表的实际输入。您可以在value属性中放置任何默认或现有标记,并且可以正确处理它们。

<input name="tags" id="tags" value="foo,bar,baz" />

然后,只需在任何应被视为标记列表的字段上调用tagsInput函数。

$('#tags').tagsInput();

如果要使用jQuery.autocomplete,可以使用自动完成URL传递参数。

$('#tags').tagsInput({
  autocomplete_url:'http://*******.com/api/autocomplete'
});

如果您正在使用带有额外参数的低音jQuery.autocomplete,您还可以将选项发送到自动完成插件,如此处所述。

$('#tags').tagsInput({
  autocomplete_url:'http://myserver.com/api/autocomplete',
  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

您可以通过调用addTag()和removeTag()函数来添加和删除标记。

$('#tags').addTag('foo');
$('#tags').removeTag('bar');

您可以使用importTags()函数导入标签列表...

$('#tags').importTags('foo,bar,baz');

您还可以使用importTags()重置标记列表...

$('#tags').importTags('');

你可以使用tagExist()检查标签是否存在...

if ($('#tags').tagExist('foo')) { ... }

如果在添加或删除标记时需要其他功能,则可以通过onAddTagonRemoveTag参数指定回调函数。两个函数都应该接受单个标记作为参数。

如果您不想提供添加标记的方法,或者您希望提供用于向框添加标记的备用界面,则可以将false传递给可选的“interactive”参数。标签仍将按常规呈现,addTag和removeTag函数将按预期运行。

如果要在每次更新/删除标记时调用函数,请将其设置为“onChange”选项。

默认情况下,如果光标紧跟在标记之后,则按退格键将删除该标记。如果要覆盖它,请将“removeWithBackspace”选项设置为false。

相关插件-标签,自动完成
  标签
 66335  384

云签,字体悬浮,无限移动(原创)

js原生实现字体悬浮,也就是云签,鼠标移入字体悬停,点击调连接,移开继续移动漂浮
  标签
 21903  313

jQuery桌面便签

jQuery实现桌面便签
  标签
 19757  282

css3-button-with-tooltip

css3-button-with-tooltip很清新
  标签
 28696  267

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?????????? 0
    2021/9/16 14:26:32
    怎么让方形框变成圆形框? 回复
    Summer、 0
    2020/6/5 10:29:18
    请问如何限制标签数量
        Summer、0
        2020/6/5 15:15:35
        解决了
        单程车票Wing0
        2020/9/17 10:09:54
        请问你是如何限制标签数量的?
        冰蝎0
        2021/5/11 11:58:40
        'maxTags' : 5,
    回复
    ?????? 0
    2019/6/29 11:06:47
    如何清除所有?
        angel?? 郁1
        2019/7/17 15:43:03
        // tags_2 是指要删除的标签
        $('#tags_2').attr('value').split(',').forEach(function(val) {
            $('#tags_2').removeTag(val)
        })
    回复
    Doris 0
    2019/6/13 17:36:19
    我要怎么将新增的标签放入input的value里呢 回复
    沅芯 0
    2018/11/29 14:00:17
    亲测,非常好用。文档非常清晰。感谢作者! 回复
    牵手&看日出 0
    2018/10/17 10:37:27
    if ($('#tags').tagExist('foo')) { ... } 这个方法为什么没有效果,使用不了呢?
        Mr liu??0
        2019/11/19 9:19:48
        记得调JQ方法
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复