Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: aehlke/tag-it
base: master
...
head fork: joshtpllc/tag-it
compare: master
Checking mergeability… Don't worry, you can still create the pull request.
  • 2 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Commits on Sep 15, 2010
@joshtpllc joshtpllc Several options added:
* hiddenFieldName + hiddenFieldIndex - allows you to specify how the hidden fields are created.  This was done to work with the ASP.NET MVC model builder.
* validationRegex - if present, checks entry against regex and styles the item based on an "invalid" class.

In addition, tab keypresses are captured and used to create a new item if the input field has a value or to tab to the next control otherwise.
00bfeab
@joshtpllc joshtpllc Added styles to enable the "invalid" class. 204371e
Showing with 218 additions and 175 deletions.
  1. +87 −75 css/jquery-ui/jquery.ui.autocomplete.custom.css
  2. +131 −100 js/tag-it.js
View
162 css/jquery-ui/jquery.ui.autocomplete.custom.css
@@ -1,75 +1,87 @@
-.ui-autocomplete {
- background-color: #eee;
- position: absolute;
- cursor: default;
-}
-.ui-autocomplete .ui-menu-item {
-}
-.ui-autocomplete .ui-menu-item a {
- display:block;
- padding:4px 6px;
- text-decoration:none;
- line-height:12px;
-}
-.ui-autocomplete .ui-menu-item a.ui-state-hover,
-.ui-autocomplete .ui-menu-item a.ui-state-active {
- background-color:#78959D;
- color:#fff;
- margin:0;
-}
-.ui-autocomplete-loading {
- background: white url(images/ui-anim_basic_16x16.gif) right center no-repeat;
-}
-
-ul.tagit {
- padding:1px 5px;
- border-style:solid;
- border-width:1px;
- border-color:#C6C6C6;
- overflow:auto;
-}
-ul.tagit li {
- -moz-border-radius:5px 5px 5px 5px;
- display: block;
- float: left;
- margin:2px 5px 2px 0;
-}
-ul.tagit li.tagit-choice {
- background-color:#DEE7F8;
- border:1px solid #CAD8F3;
- padding:2px 4px 3px;
-}
-ul.tagit li.tagit-choice:hover {
- background-color:#bbcef1;
- border-color:#6d95e0;
-}
-ul.tagit li.tagit-new {
- padding:2px 4px 3px;
- padding:2px 4px 1px;
- padding:2px 4px 1px 0;
-}
-
-ul.tagit li.tagit-choice input {
- display:block;
- float:left;
- margin:2px 5px 2px 0;
-}
-ul.tagit li.tagit-choice a.close {
- color:#777777;
- cursor:pointer;
- font-size:12px;
- font-weight:bold;
- outline:medium none;
- padding:2px 0 2px 3px;
- text-decoration:none;
-}
-ul.tagit input[type="text"] {
- -moz-box-sizing:border-box;
- border:none;
- margin:0;
- padding:0;
- width:inherit;
- border-color:#C6C6C6;
- background-color:#FFFFFF;
- color:#333333;
-}
+.ui-autocomplete {
+ background-color: #eee;
+ position: absolute;
+ cursor: default;
+}
+.ui-autocomplete .ui-menu-item {
+}
+.ui-autocomplete .ui-menu-item a {
+ display:block;
+ padding:4px 6px;
+ text-decoration:none;
+ line-height:12px;
+}
+.ui-autocomplete .ui-menu-item a.ui-state-hover,
+.ui-autocomplete .ui-menu-item a.ui-state-active {
+ background-color:#78959D;
+ color:#fff;
+ margin:0;
+}
+.ui-autocomplete-loading {
+ background: white url(images/ui-anim_basic_16x16.gif) right center no-repeat;
+}
+
+ul.tagit {
+ padding:1px 5px;
+ border-style:solid;
+ border-width:1px;
+ border-color:#C6C6C6;
+ overflow:auto;
+}
+ul.tagit li {
+ -moz-border-radius:5px 5px 5px 5px;
+ display: block;
+ float: left;
+ margin:2px 5px 2px 0;
+}
+ul.tagit li.tagit-choice {
+ background-color:#DEE7F8;
+ border:1px solid #CAD8F3;
+ padding:2px 4px 3px;
+}
+ul.tagit li.tagit-choice:hover {
+ background-color:#bbcef1;
+ border-color:#6d95e0;
+}
+ul.tagit li.tagit-choice.invalid
+{
+ background-color: #FFE4E1;
+ border: 1px solid #8B0000;
+ color: #8B0000;
+ font-weight: bold;
+}
+ul.tagit li.tagit-choice.invalid:hover
+{
+ background-color:#f5f5f5;
+ border-color: Red;
+}
+ul.tagit li.tagit-new {
+ padding:2px 4px 3px;
+ padding:2px 4px 1px;
+ padding:2px 4px 1px 0;
+}
+
+ul.tagit li.tagit-choice input {
+ display:block;
+ float:left;
+ margin:2px 5px 2px 0;
+}
+ul.tagit li.tagit-choice a.close {
+ color:#777777;
+ cursor:pointer;
+ font-size:12px;
+ font-weight:bold;
+ outline:medium none;
+ padding:2px 0 2px 3px;
+ text-decoration:none;
+}
+ul.tagit input[type="text"] {
+ -moz-box-sizing:border-box;
+ border:none;
+ margin:0;
+ padding:0;
+ width:inherit;
+ border-color:#C6C6C6;
+ background-color:#FFFFFF;
+ color:#333333;
+}
View
231 js/tag-it.js
@@ -1,100 +1,131 @@
-(function($) {
-
- $.fn.tagit = function(options) {
-
- var el = this;
-
- const BACKSPACE = 8;
- const ENTER = 13;
- const SPACE = 32;
- const COMMA = 44;
-
- // add the tagit CSS class.
- el.addClass("tagit");
-
- // create the input field.
- var html_input_field = "<li class=\"tagit-new\"><input class=\"tagit-input\" type=\"text\" /></li>\n";
- el.html (html_input_field);
-
- tag_input = el.children(".tagit-new").children(".tagit-input");
-
- $(this).click(function(e){
- if (e.target.tagName == 'A') {
- // Removes a tag when the little 'x' is clicked.
- // Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
- $(e.target).parent().remove();
- }
- else {
- // Sets the focus() to the input field, if the user clicks anywhere inside the UL.
- // This is needed because the input field needs to be of a small size.
- tag_input.focus();
- }
- });
-
- tag_input.keypress(function(event){
- if (event.which == BACKSPACE) {
- if (tag_input.val() == "") {
- // When backspace is pressed, the last tag is deleted.
- $(el).children(".tagit-choice:last").remove();
- }
- }
- // Comma/Space/Enter are all valid delimiters for new tags.
- else if (event.which == COMMA || event.which == SPACE || event.which == ENTER) {
- event.preventDefault();
-
- var typed = tag_input.val();
- typed = typed.replace(/,+$/,"");
- typed = typed.trim();
-
- if (typed != "") {
- if (is_new (typed)) {
- create_choice (typed);
- }
- // Cleaning the input.
- tag_input.val("");
- }
- }
- });
-
- tag_input.autocomplete({
- source: options.availableTags,
- select: function(event,ui){
- if (is_new (ui.item.value)) {
- create_choice (ui.item.value);
- }
- // Cleaning the input.
- tag_input.val("");
-
- // Preventing the tag input to be update with the chosen value.
- return false;
- }
- });
-
- function is_new (value){
- var is_new = true;
- this.tag_input.parents("ul").children(".tagit-choice").each(function(i){
- n = $(this).children("input").val();
- if (value == n) {
- is_new = false;
- }
- })
- return is_new;
- }
- function create_choice (value){
- var el = "";
- el = "<li class=\"tagit-choice\">\n";
- el += value + "\n";
- el += "<a class=\"close\">x</a>\n";
- el += "<input type=\"hidden\" style=\"display:none;\" value=\""+value+"\" name=\"item[tags][]\">\n";
- el += "</li>\n";
- var li_search_tags = this.tag_input.parent();
- $(el).insertBefore (li_search_tags);
- this.tag_input.val("");
- }
- };
-
- String.prototype.trim = function() {
- return this.replace(/^\s+|\s+$/g,"");
- };
-
-})(jQuery);
+(function ($) {
+
+ $.fn.tagit = function (options) {
+
+ var el = this;
+
+ var BACKSPACE = 8;
+ var ENTER = 13;
+ var TAB = 9;
+ var SPACE = 32;
+ var COMMA = 44;
+
+ var cleanAndAdd = function () {
+ var typed = tag_input.val();
+ typed = typed.replace(/,+$/, "");
+ typed = typed.trim();
+
+ if (typed != "" && !options.mustMatch) {
+ if (is_new(typed)) {
+ create_choice(typed, "");
+ }
+ // Cleaning the input.
+ tag_input.val("");
+ }
+ };
+
+ // add the tagit CSS class.
+ el.addClass("tagit");
+
+ // create the input field.
+ var html_input_field = "<li class=\"tagit-new\"><input class=\"tagit-input\" type=\"text\" /></li>\n";
+ el.html(html_input_field);
+
+ tag_input = el.children(".tagit-new").children(".tagit-input");
+
+ // read initial values
+ if (options.values) {
+ for (var i = 0; i < options.values.length; i++) {
+ create_choice(options.values[i].value, options.values[i].id);
+ }
+ }
+
+ $(this).click(function (e) {
+ if (e.target.tagName == 'A') {
+ // Removes a tag when the little 'x' is clicked.
+ // Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
+ $(e.target).parent().remove();
+ }
+ else {
+ // Sets the focus() to the input field, if the user clicks anywhere inside the UL.
+ // This is needed because the input field needs to be of a small size.
+ tag_input.focus();
+ }
+ });
+
+ tag_input.keypress(function (event) {
+ if (event.which == BACKSPACE) {
+ if (tag_input.val() == "") {
+ // When backspace is pressed, the last tag is deleted.
+ $(el).children(".tagit-choice:last").remove();
+ }
+ }
+ // Comma/Space/Enter are all valid delimiters for new tags.
+ else if (event.which == COMMA || event.which == SPACE || event.which == ENTER || event.which == TAB) {
+ event.preventDefault();
+ cleanAndAdd();
+ }
+ });
+
+ tag_input.keydown(function (event) {
+ if (event.keyCode == TAB && tag_input.val() != "") {
+ event.preventDefault();
+ cleanAndAdd();
+ }
+ });
+
+ if (options.availableTags && options.availableTags.length > 0) {
+ tag_input.autocomplete({
+ source: options.availableTags,
+ select: function (event, ui) {
+ if (is_new(ui.item.value)) {
+ create_choice(ui.item.value, ui.item.Id);
+ }
+ // Cleaning the input.
+ tag_input.val("");
+
+ // Preventing the tag input to be update with the chosen value.
+ return false;
+ }
+ });
+ }
+
+ function is_new(value) {
+ var is_new = true;
+ this.tag_input.parents("ul").children(".tagit-choice").each(function (i) {
+ n = $(this).children("input").val();
+ if (value == n) {
+ is_new = false;
+ }
+ })
+ return is_new;
+ }
+ function create_choice(value, id) {
+ var el = "";
+ var valid = true;
+ if (options.validationRegex) {
+ var re = new RegExp(options.validationRegex);
+ valid = value.match(re);
+ }
+ el = "<li class=\"tagit-choice";
+ if (!valid)
+ el += " invalid";
+ el += "\">\n";
+ el += value + "\n";
+ el += "<a class=\"close\">x</a>\n";
+ el += "<input type=\"hidden\" style=\"display:none;\" value=\"" + id + "\" name=\"" + options.hiddenFieldName;
+ if (options.hiddenFieldIndex && options.hiddenFieldIndex.length > 0)
+ el += "[" + options.hiddenFieldIndex + "]";
+ el += "\">\n";
+ el += "</li>\n";
+ var li_search_tags = this.tag_input.parent();
+ $(el).insertBefore(li_search_tags);
+ this.tag_input.val("");
+ }
+ };
+
+ String.prototype.trim = function () {
+ return this.replace(/^\s+|\s+$/g, "");
+ };
+
+})(jQuery);

No commit comments for this range

Something went wrong with that request. Please try again.