{"id":13399433,"url":"https://github.com/aehlke/tag-it","last_synced_at":"2025-05-14T01:03:05.291Z","repository":{"id":1379957,"uuid":"1333726","full_name":"aehlke/tag-it","owner":"aehlke","description":"A jQuery UI plugin to handle multi-tag fields as well as tag suggestions/autocomplete.","archived":false,"fork":false,"pushed_at":"2023-08-28T03:42:19.000Z","size":663,"stargazers_count":2474,"open_issues_count":253,"forks_count":821,"subscribers_count":74,"default_branch":"master","last_synced_at":"2025-04-03T05:07:43.256Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://aehlke.github.com/tag-it/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aehlke.png","metadata":{"files":{"readme":"README.markdown","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2011-02-06T06:22:11.000Z","updated_at":"2025-01-31T09:49:31.000Z","dependencies_parsed_at":"2022-08-06T10:16:19.605Z","dependency_job_id":"ea22f64b-0191-4e9b-a7f8-d5939d8c7396","html_url":"https://github.com/aehlke/tag-it","commit_stats":{"total_commits":222,"total_committers":30,"mean_commits":7.4,"dds":"0.33333333333333337","last_synced_commit":"860894dc425725ee4fcf515caeba53b0b67ea812"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aehlke%2Ftag-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aehlke%2Ftag-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aehlke%2Ftag-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aehlke%2Ftag-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aehlke","download_url":"https://codeload.github.com/aehlke/tag-it/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248197331,"owners_count":21063619,"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-30T19:00:37.751Z","updated_at":"2025-04-10T09:48:31.518Z","avatar_url":"https://github.com/aehlke.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Form Widgets","Form Widgets [🔝](#readme)","UI","表单组件"],"sub_categories":["Input","输入"],"readme":"# Tag-it: a jQuery UI plugin\n\n---\n\n**IMPORTANT: tag-it is _unmaintained_.**\n\nTag-it has reached end-of-life, and we're not looking to update or maintain it.  This library _should_ still work, but there are many PRs open and forks that you might want to consider before using it.\n\nAs a tag-it replacement, we currently recommend [tagify](https://github.com/yairEO/tagify), which appears to be a popular library that is still being actively developed as of late 2023.\n\nThank you!\n\n---\n\nTag-it is a simple and configurable tag editing widget with autocomplete support.\n\n[Homepage](http://aehlke.github.com/tag-it/)\n\n## Demo\n\n![Screenshot](http://aehlke.github.com/tag-it/_static/screenshot.png)\n\nCheck the [examples.html](http://aehlke.github.com/tag-it/examples.html) for several demos and the [prototype.js](http://aehlke.github.com/tag-it/prototype.js) file for a JavaScript prototype with all options and events.\n\n## Usage\n\nFirst, load [jQuery](http://jquery.com/) (v1.4 or greater), [jQuery UI](http://jqueryui.com/) (v1.8 or greater), and the plugin:\n\n    \u003cscript src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n    \u003cscript src=\"js/tag-it.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\nIf you're using a custom jQuery UI build, it must contain the Core, Widget, Position, and Autocomplete components. The Effects Core with \"Blind\" and \"Highlight\" Effect components are optional, but used if available.\n\nThe plugin requires either a jQuery UI theme or a Tag-it theme to be present, as well as its own included base CSS file ([jquery.tagit.css](http://github.com/aehlke/tag-it/raw/master/css/jquery.tagit.css)). Here we use the Flick theme as an example:\n\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css\"\u003e\n\t\u003clink href=\"css/jquery.tagit.css\" rel=\"stylesheet\" type=\"text/css\"\u003e\n\nNow, let's attach it to an existing `\u003cul\u003e` box:\n\n    \u003cscript type=\"text/javascript\"\u003e\n        $(document).ready(function() {\n            $(\"#myTags\").tagit();\n        });\n    \u003c/script\u003e\n\n    \u003cul id=\"myTags\"\u003e\n        \u003c!-- Existing list items will be pre-added to the tags --\u003e\n        \u003cli\u003eTag1\u003c/li\u003e\n        \u003cli\u003eTag2\u003c/li\u003e\n    \u003c/ul\u003e\n\nThis will turn the list into a tag-it widget. There are several other possible configurations and ways to instantiate the widget, including one that uses a single comma-delimited `input` field rather than one per tag, so see the **Options** documentation below as well as the [examples page](http://aehlke.github.com/tag-it/examples.html) (and its source) which demonstrates most of them, as well as the Tag-it Zendesk theme used in the screenshot above.\n\n\n## Theming\n\nTag-it is as easily themeable as any jQuery UI widget, using your own theme made with [Themeroller](http://jqueryui.com/themeroller/), or one of the jQuery UI [premade themes](http://jqueryui.com/themeroller/#themeGallery). The old ZenDesk-like theme is included as an optional CSS file ([tagit.ui-zendesk.css](http://github.com/aehlke/tag-it/raw/master/css/tagit.ui-zendesk.css)).\n\n\n## Options\n\nTag-it accepts several options to customize its behaviour:\n\n### fieldName (String)\n\nEach tag's hidden input field will have this name.\nIf you're using PHP, you may want to use something like `itemName[fieldName][]` for this option's value.\n\n    $(\"#myTags\").tagit({\n        fieldName: \"skills\"\n    });\n\nDefaults to *tags*.\n\n### availableTags (Array)\n\nUsed as source for the autocompletion, unless **autocomplete.source** is overridden.\n\n    $(\"#myTags\").tagit({\n        availableTags: [\"c++\", \"java\", \"php\", \"javascript\", \"ruby\", \"python\", \"c\"]\n    });\n\nIf you define your own **autocomplete.source**, this option is unused (unless you choose to reference it yourself from your custom **autocomplete.source** of course.)\n\nDefaults to an empty array *[]*.\n\n### autocomplete (Object)\n\nAllows overriding the `source` and `select` options that are set by default,\nas well as adding any other options you want to pass to the jQuery UI Autocomplete widget, such as `minLength` or `delay`.\n\nThe `autocomplete.source` should be overridden if you want to use custom autocompletion sources, like an Ajax / XHR response.\n\nFor example:\n\n    $(\"#myTags\").tagit({\n        autocomplete: {delay: 0, minLength: 2}\n    });\n\nThe default `autocomplete.source` function filters the strings in **availableTags** and subtracts the already assigned tags. It also positions autocomplete underneath tag input. See the full list of available options [here](http://jqueryui.com/demos/autocomplete/).\n\n### showAutocompleteOnFocus (boolean)\n\nShows autocomplete when the tag input first receives focus, before the user even types anything.\n\nIf enabled, this will also make **autocomplete.minLength** default to `0` unless you override that, so that autocomplete can show up with a blank search.\n\nDefaults to *false*.\n\n### removeConfirmation (boolean)\n\nWhen removeConfirmation is enabled the user has to press the backspace key twice to remove the last tag.\nAfter the first keypress the last tag receives a *remove* css class which can be used to visually highlight the tag.\n\nDefaults to *false*.\n\n### caseSensitive (boolean)\n\nwhether the duplication check should do a case sensitive check or not.\n\nDefaults to *true*.\n\n### allowDuplicates (boolean)\n\nAllows duplicate tags to be created.\nOne implication of this is that `removeTagByLabel` will remove all tags which match the given label.\n\nDefaults to *false*.\n\n### allowSpaces (boolean)\n\nWhen allowSpaces is enabled the user is not required to wrap multi-word tags in quotation marks.\nFor example, the user can enter `John Smith` instead of `\"John Smith\"`.\n\nDefaults to *false*.\n\n### readOnly (boolean)\n\nWhen enabled, tag-it just render tags. It disables the ability to edit tags.\n\nDefaults to *false*.\n\n### tagLimit (integer)\n\nLimits the total number of tags that can be entered at once. Note that if you use this option with preloaded data,\nit may truncate the number of preloaded tags. Set to `null` for unlimited tags. See the **onTagLimitExceeded**\ncallback for customizing this behavior.\n\nDefaults to *null*.\n\n### singleField (boolean)\n\nWhen enabled, will use a single hidden field for the form, rather than one per tag.\nIt will delimit tags in the field with **singleFieldDelimiter**.\n\nDefaults to *false*, unless Tag-it was created on an `input` element, in which case **singleField** will be overridden as true.\n\n### singleFieldDelimiter (String)\n\nDefaults to *\",\"*\n\n### singleFieldNode (DomNode)\n\nSet this to an input DOM node to use an existing form field.\nAny text in it will be erased on init. But it will be populated with the text of tags as they are created, delimited by **singleFieldDelimiter**.\nIf this is not set, we create an input node for it, with the name given in **fieldName**.\n\nDefaults to *null*, unless Tag-it was created on an `input` element, in which case **singleFieldNode** will be overridden with that element.\n\n### tabIndex (integer)\nOptionally set a *tabindex* attribute on the `input` that gets created for tag-it user input.\n\nDefaults to *null*\n\n### placeholderText (String)\nOptionally set a *placeholder* attribute on the `input` that gets created for tag-it user input.\n\nDefaults to *null*\n\n\n## Events\n\n### beforeTagAdded (function, Callback)\n\nCan be used to add custom behaviour before the tag is added to the DOM.\n\nThe function receives a null event, and an object containing the properties `tag`, `tagLabel`, and `duringInitialization`.\n\n`duringInitialization` is a boolean indicating whether the tag was added during the initial construction of this widget,\ne.g. when initializing tag-it on an input with preloaded data. You can use this to tell whether the event was initiated by\nthe user or by the widget's initialization.\n\nTo cancel a tag from being added, simply return `false` in your event callback to bail out from adding the tag and stop propagation of the event.\n\n    $(\"#myTags\").tagit({\n        beforeTagAdded: function(event, ui) {\n            // do something special\n            console.log(ui.tag);\n        }\n    });\n\n### afterTagAdded (function, Callback)\n\nBehaves the same as **beforeTagAdded** except that it fires after the tag has been added to the DOM.\nIt too receives the `duringInitialization` parameter — see **beforeTagAdded** for details.\n\n### beforeTagRemoved (function, Callback)\n\nCan be used to add custom behaviour before the tag is removed from the DOM.\n\nTo cancel a tag from being removed, simply return `false` in your event callback to bail out from removing the tag and stop propagation of the event.\n\nThe function receives a null event, and an object with `tag` and `tagLabel` properties.\n\n    $(\"#myTags\").tagit({\n        beforeTagRemoved: function(event, ui) {\n            // do something special\n            console.log(ui.tag);\n        }\n    });\n\n### afterTagRemoved (function, Callback)\n\nBehaves the same as **beforeTagRemoved** except that it fires after the tag has been removed from the DOM.\n\n### onTagExists (function, Callback)\n\nTriggered when attempting to add a tag that has already been added in the widget. The callback receives a null event,\nand an object containing the properties `existingTag` and `duringInitialization`, since technically you could try to preload\nduplicate tags during the widget initialization.\n\nIf the **allowDuplicates** option is enabled, this will not be triggered.\n\nBy default it will visually highlight the existing tag, unless you return *false* in your callback.\n\n### onTagClicked (function, Callback)\n\nCan be used to add custom behaviour when the tag is clicked.\nThe function receives the click event and an objecting containing `tag` and `tagLabel` properties.\n\n    $(\"#myTags\").tagit({\n        onTagClicked: function(event, ui) {\n            // do something special\n            console.log(ui.tag);\n        }\n    });\n\n### onTagLimitExceeded (function, Callback)\n\nCalled when attempting to create a tag while the tag limit has already been reached. Receives a null event,\nand an object with the property `duringInitialization`. This can only be called if **tagLimit** is set.\n\n## Methods\n\n### assignedTags()\nReturns an array of the text values of all the tags currently in the widget.\n\n    $(\"#myTags\").tagit(\"assignedTags\");\n\n### createTag(tagLabel, additionalClass)\nAdds new tag to the list. The `additionalClass` parameter is an optional way to add classes to the tag element.\n\n    $(\"#myTags\").tagit(\"createTag\", \"brand-new-tag\");\n\n### preprocessTag(function, Callback)\nSet a function to be called before tag is created. Callback receives the\nvalue of the tag created.\n\n    // ensure all tags are capitalized\n    $(#tag-it\").tagit(\"preprocessTag\", function(val) {\n      if (!val) { return ''; }\n      return val[0].toUpperCase() + val.slice(1, val.length);\n    });\n    // foo -\u003e Foo\n\n### removeTagByLabel(tagLabel, animate)\nFinds the tag with the label `tagLabel` and removes it. If no such tag is found, it'll throw an exception.\n\n    $(\"#myTags\").tagit(\"removeTagByLabel\", \"my-tag\");\n\n### removeAll()\nClears the widget of all tags — removes each tag it contains, so the **beforeTagRemoved** / **afterTagRemoved** event callbacks (if set) will be called for each.\n\n    $(\"#myTags\").tagit(\"removeAll\");\n\n## Properties\n\n### tagInput\nThe `\u003cinput\u003e` field which is used for entering new tags. It's a jQuery object, so you may use it to add a class or anything to it, e.g.:\n\n    $(\"#myTags\").data(\"ui-tagit\").tagInput.addClass(\"fancy\");\n\n\n## Authors\n\n* [Levy Carneiro Jr.](http://github.com/levycarneiro) *original author*\n* [Martin Rehfeld](http://github.com/martinrehfeld)\n* [Tobias Schmidt](http://github.com/grobie)\n* [Skylar Challand](http://github.com/sskylar)\n* [Alex Ehlke](http://github.com/aehlke) *current maintainer*\n\n\n## License\n\ntag-it is released under the [MIT license](http://github.com/aehlke/tag-it/raw/master/LICENSE).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faehlke%2Ftag-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faehlke%2Ftag-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faehlke%2Ftag-it/lists"}