Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add requireAutocomplete option #37

Closed
wants to merge 4 commits into from
@cleishm

Require all tags to be created from autocomplete suggestions

@rstudner

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

@KieranP

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

@bond-

+1

@aehlke
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.

@aehlke
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).

@aehlke aehlke closed this
@aehlke
Owner

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

@mandersondesign

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

@sdrdis

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
Commits on Sep 28, 2011
  1. @cleishm

    Add requireAutocomplete option

    cleishm authored
    Require all tags to be created from autocomplete suggestions
Commits on Sep 29, 2011
  1. @cleishm
  2. @cleishm
Commits on Oct 6, 2011
  1. @cleishm
This page is out of date. Refresh to see the latest.
Showing with 47 additions and 24 deletions.
  1. +8 −0 README.markdown
  2. +39 −24 js/tag-it.js
View
8 README.markdown
@@ -147,6 +147,14 @@ Optionally set a *tabindex* attribute on the `input` that gets created for tag-i
Defaults to *null*
+### requireAutocomplete (boolean)
+
+When enabled, tags will only be created when selected from options presented
+by autocomplete.
+
+Defaults to *false*, and is ignored if neither **availableTags** or
+**tagSource** are defined.
+
## Events
View
63 js/tag-it.js
@@ -71,6 +71,8 @@
// created for tag-it.
tabIndex: null,
+ // Whether to only create tags only from autocomplete suggestions
+ requireAutocomplete: false,
// Event callbacks.
onTagAdded : null,
@@ -101,21 +103,28 @@
this._tagInput.attr('tabindex', this.options.tabIndex);
}
- this.options.tagSource = this.options.tagSource || function(search, showChoices) {
- var filter = search.term.toLowerCase();
- var choices = $.grep(this.options.availableTags, function(element) {
- // Only match autocomplete options that begin with the search term.
- // (Case insensitive.)
- return (element.toLowerCase().indexOf(filter) === 0);
- });
- showChoices(this._subtractArray(choices, this.assignedTags()));
- };
+ if (!this.options.tagSource && this.options.availableTags.length > 0) {
+ this.options.tagSource = function(search, showChoices) {
+ var filter = search.term.toLowerCase();
+ var choices = $.grep(that.options.availableTags, function(element) {
+ // Only match autocomplete options that begin with the search term.
+ // (Case insensitive.)
+ return (element.toLowerCase().indexOf(filter) === 0);
+ });
+ showChoices(that._subtractArray(choices, this.assignedTags()));
+ };
+ }
// Bind tagSource callback functions to this context.
if ($.isFunction(this.options.tagSource)) {
this.options.tagSource = $.proxy(this.options.tagSource, this);
}
+ // cannot require autocomplete without an autocomplete source
+ if (!this.options.tagSource) {
+ this.options.requireAutocomplete = false;
+ }
+
this.tagList
.addClass('tagit')
.addClass('ui-widget ui-widget-content ui-corner-all')
@@ -158,21 +167,21 @@
}
// Events.
- this._tagInput
- .keydown(function(event) {
- // Backspace is not detected within a keypress, so it must use keydown.
- if (event.which == $.ui.keyCode.BACKSPACE && that._tagInput.val() === '') {
- var tag = that._lastTag();
- if (!that.options.removeConfirmation || tag.hasClass('remove')) {
- // When backspace is pressed, the last tag is deleted.
- that.removeTag(tag);
- } else if (that.options.removeConfirmation) {
- tag.addClass('remove ui-state-highlight');
- }
+ this._tagInput.keydown(function(event) {
+ // Backspace is not detected within a keypress, so it must use keydown.
+ if (event.which == $.ui.keyCode.BACKSPACE && that._tagInput.val() === '') {
+ var tag = that._lastTag();
+ if (!that.options.removeConfirmation || tag.hasClass('remove')) {
+ // When backspace is pressed, the last tag is deleted.
+ that.removeTag(tag);
} else if (that.options.removeConfirmation) {
- that._lastTag().removeClass('remove ui-state-highlight');
+ tag.addClass('remove ui-state-highlight');
}
+ } else if (that.options.removeConfirmation) {
+ that._lastTag().removeClass('remove ui-state-highlight');
+ }
+ if (that.options.requireAutocomplete !== true) {
// Comma/Space/Enter are all valid delimiters for new tags,
// except when there is an open quote or if setting allowSpaces = true.
// Tab will also create a tag, unless the tag input is empty, in which case it isn't caught.
@@ -203,14 +212,20 @@
// So let's ensure that it closes.
that._tagInput.autocomplete('close');
}
- }).blur(function(e){
+ } else if (event.which == $.ui.keyCode.ENTER) {
+ event.preventDefault();
+ }
+ });
+
+ if (this.options.requireAutocomplete !== true) {
+ this._tagInput.blur(function(e) {
// Create a tag when the element loses focus (unless it's empty).
that.createTag(that._cleanedInput());
});
-
+ }
// Autocomplete.
- if (this.options.availableTags || this.options.tagSource) {
+ if (this.options.tagSource) {
this._tagInput.autocomplete({
source: this.options.tagSource,
select: function(event, ui) {
Something went wrong with that request. Please try again.