Skip to content
This repository

Add requireAutocomplete option #37

Closed
wants to merge 4 commits into from

11 participants

Chris Leishman Roger Studner Kieran Pilkington Gábor Egyed litchfield David Larlet hrasguido Ravi Teja Alex Ehlke Michael Anderson Sébastien Drouyer
Chris Leishman

Require all tags to be created from autocomplete suggestions

Roger Studner

I sort of pulled this off (the short hack version) with this (in createTag)
if (this.options.limitNewTags && $.inArray(value, this.options.availableTags) == -1) {
this._tagInput.val('');
//we just disallow this
return false;
}

with a limitNewTags boolean option on startup

Kieran Pilkington

+1 Need something like that so that only admins can create new tags, but anyone else must use the already defined ones.

David Larlet

+1

Ravi Teja

+1

Alex Ehlke
Owner

I'm going to first accomplish this in a generic way by adding a beforeTagAdded event hook which will let you decide whether or not to allow the tag to be added.

Alex Ehlke
Owner

This exists now, check the updated docs for beforeTagAdded.

I'd still like to make this easier though, but you can accomplish it manually now at least without having to fork the project. Closing this for now, and I'll come up with a more elegant solution later (which is a bit tricky to do right).

Alex Ehlke aehlke closed this November 25, 2012
Alex Ehlke
Owner

To clarify, just return false in your callback to reject the tag.

Michael Anderson

Any update on this? And also, is there a good example of someone doing this in the correct way?

Sébastien Drouyer

Is there any way to know when beforeTagAdded is called if the tag comes from the user input or the source ? Thanks...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 4 unique commits by 1 author.

Sep 28, 2011
Chris Leishman Add requireAutocomplete option
Require all tags to be created from autocomplete suggestions
9ddc900
Sep 29, 2011
Chris Leishman Disable requireAutocommit when no autocommit source b73d670
Chris Leishman Documentation of requireAutocommit e5f364c
Oct 06, 2011
Chris Leishman Added comment regarding requireAutocomplete option 789c3b0
This page is out of date. Refresh to see the latest.
8  README.markdown
Source Rendered
@@ -147,6 +147,14 @@ Optionally set a *tabindex* attribute on the `input` that gets created for tag-i
147 147
 
148 148
 Defaults to *null*
149 149
 
  150
+### requireAutocomplete (boolean)
  151
+
  152
+When enabled, tags will only be created when selected from options presented
  153
+by autocomplete.
  154
+
  155
+Defaults to *false*, and is ignored if neither **availableTags** or
  156
+**tagSource** are defined.
  157
+
150 158
 
151 159
 ## Events
152 160
 
63  js/tag-it.js
@@ -71,6 +71,8 @@
71 71
             // created for tag-it.
72 72
             tabIndex: null,
73 73
 
  74
+            // Whether to only create tags only from autocomplete suggestions
  75
+            requireAutocomplete: false,
74 76
 
75 77
             // Event callbacks.
76 78
             onTagAdded  : null,
@@ -101,21 +103,28 @@
101 103
                 this._tagInput.attr('tabindex', this.options.tabIndex);
102 104
             }
103 105
 
104  
-            this.options.tagSource = this.options.tagSource || function(search, showChoices) {
105  
-                var filter = search.term.toLowerCase();
106  
-                var choices = $.grep(this.options.availableTags, function(element) {
107  
-                    // Only match autocomplete options that begin with the search term.
108  
-                    // (Case insensitive.)
109  
-                    return (element.toLowerCase().indexOf(filter) === 0);
110  
-                });
111  
-                showChoices(this._subtractArray(choices, this.assignedTags()));
112  
-            };
  106
+            if (!this.options.tagSource && this.options.availableTags.length > 0) {
  107
+                this.options.tagSource = function(search, showChoices) {
  108
+                    var filter = search.term.toLowerCase();
  109
+                    var choices = $.grep(that.options.availableTags, function(element) {
  110
+                        // Only match autocomplete options that begin with the search term.
  111
+                        // (Case insensitive.)
  112
+                        return (element.toLowerCase().indexOf(filter) === 0);
  113
+                    });
  114
+                    showChoices(that._subtractArray(choices, this.assignedTags()));
  115
+                };
  116
+            }
113 117
 
114 118
             // Bind tagSource callback functions to this context.
115 119
             if ($.isFunction(this.options.tagSource)) {
116 120
                 this.options.tagSource = $.proxy(this.options.tagSource, this);
117 121
             }
118 122
 
  123
+            // cannot require autocomplete without an autocomplete source
  124
+            if (!this.options.tagSource) {
  125
+                this.options.requireAutocomplete = false;
  126
+            }
  127
+
119 128
             this.tagList
120 129
                 .addClass('tagit')
121 130
                 .addClass('ui-widget ui-widget-content ui-corner-all')
@@ -158,21 +167,21 @@
158 167
             }
159 168
 
160 169
             // Events.
161  
-            this._tagInput
162  
-                .keydown(function(event) {
163  
-                    // Backspace is not detected within a keypress, so it must use keydown.
164  
-                    if (event.which == $.ui.keyCode.BACKSPACE && that._tagInput.val() === '') {
165  
-                        var tag = that._lastTag();
166  
-                        if (!that.options.removeConfirmation || tag.hasClass('remove')) {
167  
-                            // When backspace is pressed, the last tag is deleted.
168  
-                            that.removeTag(tag);
169  
-                        } else if (that.options.removeConfirmation) {
170  
-                            tag.addClass('remove ui-state-highlight');
171  
-                        }
  170
+            this._tagInput.keydown(function(event) {
  171
+                // Backspace is not detected within a keypress, so it must use keydown.
  172
+                if (event.which == $.ui.keyCode.BACKSPACE && that._tagInput.val() === '') {
  173
+                    var tag = that._lastTag();
  174
+                    if (!that.options.removeConfirmation || tag.hasClass('remove')) {
  175
+                        // When backspace is pressed, the last tag is deleted.
  176
+                        that.removeTag(tag);
172 177
                     } else if (that.options.removeConfirmation) {
173  
-                        that._lastTag().removeClass('remove ui-state-highlight');
  178
+                        tag.addClass('remove ui-state-highlight');
174 179
                     }
  180
+                } else if (that.options.removeConfirmation) {
  181
+                    that._lastTag().removeClass('remove ui-state-highlight');
  182
+                }
175 183
 
  184
+                if (that.options.requireAutocomplete !== true) {
176 185
                     // Comma/Space/Enter are all valid delimiters for new tags,
177 186
                     // except when there is an open quote or if setting allowSpaces = true.
178 187
                     // Tab will also create a tag, unless the tag input is empty, in which case it isn't caught.
@@ -203,14 +212,20 @@
203 212
                         // So let's ensure that it closes.
204 213
                         that._tagInput.autocomplete('close');
205 214
                     }
206  
-                }).blur(function(e){
  215
+                } else if (event.which == $.ui.keyCode.ENTER) {
  216
+                    event.preventDefault();
  217
+                }
  218
+            });
  219
+
  220
+            if (this.options.requireAutocomplete !== true) {
  221
+                this._tagInput.blur(function(e) {
207 222
                     // Create a tag when the element loses focus (unless it's empty).
208 223
                     that.createTag(that._cleanedInput());
209 224
                 });
210  
-                
  225
+            }
211 226
 
212 227
             // Autocomplete.
213  
-            if (this.options.availableTags || this.options.tagSource) {
  228
+            if (this.options.tagSource) {
214 229
                 this._tagInput.autocomplete({
215 230
                     source: this.options.tagSource,
216 231
                     select: function(event, ui) {
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.