阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.tagsinput 中文 API 文档

      插件 jQuery.tagsinput 中文 API 文档 https://github.com/xoxco/jquery-Tags-Input

      您是否使用标签来整理网站上的内容?这个插件会将你无聊的标签列表变成一个神奇的输入,将每个标签变成一个具有自己删除链接的样式对象。该插件处理所有数据 - 您的表单只是看到以逗号分隔的标记列表!

      说明

      首先,将 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://myserver.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')) { ... }
      

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

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

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

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

      选项

      $(selector).tagsInput({
         'autocomplete_url': url_to_autocomplete_api,
         'autocomplete': { option: value, option: value},
         'height':'100px',
         'width':'300px',
         'interactive':true,
         'defaultText':'add a tag',
         'onAddTag':callback_function,
         'onRemoveTag':callback_function,
         'onChange' : callback_function,
         'delimiter': [',',';'],   // Or a string with a single delimiter. Ex: ';'
         'removeWithBackspace' : true,
         'minChars' : 0,
         'maxChars' : 0, // if not provided there is no limit
         'placeholderColor' : '#666666'
      });
      
      目录
      本文目录
      目录