{"id":13500824,"url":"https://github.com/xoxco/jQuery-Tags-Input","last_synced_at":"2025-03-29T07:31:56.314Z","repository":{"id":57282410,"uuid":"1606665","full_name":"xoxco/jQuery-Tags-Input","owner":"xoxco","description":"Magically convert a simple text input into a cool tag list with this jQuery plugin.","archived":true,"fork":false,"pushed_at":"2018-03-20T15:56:24.000Z","size":3328,"stargazers_count":2287,"open_issues_count":114,"forks_count":826,"subscribers_count":90,"default_branch":"master","last_synced_at":"2024-09-27T04:22:33.976Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://xoxco.com/projects/code/tagsinput/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xoxco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-04-12T22:37:05.000Z","updated_at":"2024-08-14T07:10:40.000Z","dependencies_parsed_at":"2022-08-31T04:21:56.727Z","dependency_job_id":null,"html_url":"https://github.com/xoxco/jQuery-Tags-Input","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xoxco%2FjQuery-Tags-Input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xoxco%2FjQuery-Tags-Input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xoxco%2FjQuery-Tags-Input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xoxco%2FjQuery-Tags-Input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xoxco","download_url":"https://codeload.github.com/xoxco/jQuery-Tags-Input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246155998,"owners_count":20732355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T22:01:15.566Z","updated_at":"2025-03-29T07:31:56.039Z","avatar_url":"https://github.com/xoxco.png","language":"JavaScript","readme":"# jQuery Tags Input Plugin\n\nDo you use tags to organize content on your site?\nThis plugin will turn your boring tag list into a\nmagical input that turns each tag into a style-able\nobject with its own delete link. The plugin handles\nall the data - your form just sees a comma-delimited\nlist of tags!\n\n[Get it from Github](https://github.com/xoxco/jQuery-Tags-Input)\n\n[View Demo](http://xoxco.com/projects/code/tagsinput/)\n\n[Test it yourself using this jsFiddle Demo](http://jsfiddle.net/7aDak/)\n\nCreated by [XOXCO](http://xoxco.com)\n\n\n## Instructions\n\nFirst, add the Javascript and CSS files to your \u003chead\u003e tag:\n\n\t\u003cscript src=\"jquery.tagsinput.js\"\u003e\u003c/script\u003e\n\t\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"jquery.tagsinput.css\" /\u003e\n\nCreate a real input in your form that will contain a comma-separated list of\ntags. You can put any default or existing tags in the value attribute, and\nthey'll be handled properly.\n\n\t\u003cinput name=\"tags\" id=\"tags\" value=\"foo,bar,baz\" /\u003e\n\nThen, simply call the tagsInput function on any field that should be treated as\na list of tags.\n\n\t$('#tags').tagsInput();\n\nIf you want to use jQuery.autocomplete, you can pass in a parameter with the\nautocomplete url.\n\n\t$('#tags').tagsInput({\n\t  autocomplete_url:'http://myserver.com/api/autocomplete'\n\t});\n\nIf you're using the bassistance jQuery.autocomplete, which takes extra\nparameters, you can also send in options to the autocomplete plugin, as\ndescribed here.\n\n\t$('#tags').tagsInput({\n\t  autocomplete_url:'http://myserver.com/api/autocomplete',\n\t  autocomplete:{selectFirst:true,width:'100px',autoFill:true}\n\t});\n\nYou can add and remove tags by calling the addTag() and removeTag() functions.\n\n\t$('#tags').addTag('foo');\n\t$('#tags').removeTag('bar');\n\nYou can import a list of tags using the importTags() function...\n\n\t$('#tags').importTags('foo,bar,baz');\n\nYou can also use importTags() to reset the tag list...\n\n\t$('#tags').importTags('');\n\nAnd you can check if a tag exists using tagExist()...\n\n\tif ($('#tags').tagExist('foo')) { ... }\n\nIf additional functionality is required when a tag is added or removed, you may\nspecify callback functions via the onAddTag and onRemoveTag parameters.  Both\nfunctions should accept a single tag as the parameter.\n\nIf you do not want to provide a way to add tags, or you would prefer to provide\nan alternate interface for adding tags to the box, you may pass an false into\nthe optional 'interactive' parameter. The tags will still be rendered as per\nusual, and the addTag and removeTag functions will operate as expected.\n\nIf you want a function to be called every time a tag is updated/deleted, set it\nas the 'onChange' option.\n\nBy default, if the cursor is immediately after a tag, hitting backspace will\ndelete that tag. If you want to override this, set the 'removeWithBackspace'\noption to false.\n\n## Options\n\n\t$(selector).tagsInput({\n\t   'autocomplete_url': url_to_autocomplete_api,\n\t   'autocomplete': { option: value, option: value},\n\t   'height':'100px',\n\t   'width':'300px',\n\t   'interactive':true,\n\t   'defaultText':'add a tag',\n\t   'onAddTag':callback_function,\n\t   'onRemoveTag':callback_function,\n\t   'onChange' : callback_function,\n\t   'delimiter': [',',';'],   // Or a string with a single delimiter. Ex: ';'\n\t   'removeWithBackspace' : true,\n\t   'minChars' : 0,\n\t   'maxChars' : 0, // if not provided there is no limit\n\t   'placeholderColor' : '#666666'\n\t});\n","funding_links":[],"categories":["JavaScript","Form Widgets","Form Widgets [🔝](#readme)","UI","表单组件","10. 表单处理"],"sub_categories":["Input","输入","10.8 标签插件(Tag)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxoxco%2FjQuery-Tags-Input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxoxco%2FjQuery-Tags-Input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxoxco%2FjQuery-Tags-Input/lists"}