Ticket #2589 (closed enhancement: fixed)

Opened 17 months ago

Last modified 8 months ago

[dojox][cla][patch] combobox with multiple values

Reported by: jan831@… Owned by: dante
Priority: low Milestone: 1.1
Component: Dojox Version: 0.4.1
Severity: normal Keywords: combobox
Cc: caleb@…

Description

for example a list of email addresses

only the last part of the input field (after the last delimiter) is used to propose values, and a choosen value is appended to the existing value

(the YUI autocomplete widget has this feature, if my explanation isn't very clear)

Attachments

dijit.Tagger.js (1.5 kB) - added by guest 8 months ago.
tagger.html (1.1 kB) - added by guest 8 months ago.
tagger.json (1.9 kB) - added by guest 8 months ago.

Change History

Changed 14 months ago by bill

  • owner deleted
  • component changed from Widgets to Dojox

Changed 9 months ago by guest

This ticket is old but I would really like to see it addressed. I'm willing to help make it happen, but I need someone that knows the inside workings a little better than I do to supervise.

YUI has a working implementation, see their docs at: http://developer.yahoo.com/yui/autocomplete/#delim

Google also has something similar in their label feature for google reader http://www.google.com/reader

This script also get's the job done, although the javscript is ugly! http://www.codeproject.com/jscript/jsactb.asp

If anybody can help out on this, contact me (Caleb) caleb@….

Changed 9 months ago by guest

For others interested in this, I hacked up a quick test of this feature using ComboBox? as a base. It is ugly I know, but it works. The whole thing is packaged in an onload because I was using AOL's CDN copy of dojo 1.0.0. You may need to adjust to use it locally. caleb@….

dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.ValidationTextBox");

dojo.addOnLoad(function() {
	dojo.provide("dijit.quelib.Tagger");

	dojo.declare(
		"dijit.quelib.Tagger",
		[dijit.form.ValidationTextBox, dijit.form.ComboBoxMixin],
		{
			delimiter: ",",
			_multimatch: false,

			setValue: function (value) {
				if (value.length != 0) {
					value = value+this.delimiter+" ";
				}
				arguments[0] = this._addBase(value);
				this.inherited("setValue", arguments);
			},

			_addBase: function(text) {
				if (this._multimatch) {
					var re = RegExp("^"+this._multimatch);
					if (!text.match(re)) {
						text = this._multimatch + text;
					}
					text = this._cleanup(text);
				}
				return text;
			},

			_cleanup: function(text) {
				if (this.delimiter) {
					text = text.replace(new RegExp("  +"), " ");
					text = text.replace(new RegExp("^ *"+this.delimiter+"* *"), "");
					text = text.replace(new RegExp(this.delimiter+" *"+this.delimiter), this.delimiter);
				}
				return text;
			},
			
			_autoCompleteText: function(text) {
				arguments[0] = this._addBase(text);
				this.inherited("_autoCompleteText", arguments);
			},

			_doSelect: function(text) {
				this.inherited("_doSelect", arguments);
			},

			_startSearch: function (text) {
				text = this._cleanup(text);
				var re = new RegExp("^.*"+this.delimiter+" *");
				if (this._multimatch = text.match(re)) {
					arguments[0] = text.replace(re, "");
				}
				this.inherited("_startSearch", arguments);
			},

			postMixInProperties: function(){
				dijit.form.ComboBoxMixin.prototype.postMixInProperties.apply(this, arguments);
				dijit.form.ValidationTextBox.prototype.postMixInProperties.apply(this, arguments);
			}
		}
	);
});

Changed 9 months ago by guest

Here is a more sane version of the above (which had unnessesary code):

dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.ValidationTextBox");

dojo.addOnLoad(function() {
	dojo.provide("dijit.quelib.Tagger");

	dojo.declare(
		"dijit.quelib.Tagger",
		[dijit.form.ValidationTextBox, dijit.form.ComboBoxMixin],
		{
			delimiter: ",",
			_previousMatches: false,

			setValue: function (value) {
				if (this.delimiter && value.length != 0) {
					value = value+this.delimiter+" ";
					arguments[0] = this._addPreviousMatches(value);
				}
				this.inherited("setValue", arguments);
			},

			_addPreviousMatches: function (text) {
				if (this._previousMatches) {
					if (!text.match(new RegExp("^"+this._previousMatches)) {
						text = this._previousMatches+text;
					}
					text = this._cleanupDelimiters(text);
				}
				return text;
			},

			_cleanupDelimiters: function (text) {
				if (this.delimiter) {
					text = text.replace(new RegExp("  +"), " ");
					text = text.replace(new RegExp("^ *"+this.delimiter+"* *"), "");
					text = text.replace(new RegExp(this.delimiter+" *"+this.delimiter), this.delimiter);
				}
				return text;
			},
			
			_autoCompleteText: function (text) {
				arguments[0] = this._addPreviousMatches(text);
				this.inherited("_autoCompleteText", arguments);
			},

			_startSearch: function (text) {
				text = this._cleanupDelimiters(text);
				var re = new RegExp("^.*"+this.delimiter+" *");
				if (this._previousMatches = text.match(re)) {
					arguments[0] = text.replace(re, "");
				}
				this.inherited("_startSearch", arguments);
			},
		}
	);
});

Changed 8 months ago by dante

  • cc caleb@… added
  • owner set to dante
  • summary changed from combobox with multiple values to [dojox][patch] combobox with multiple values
  • status changed from new to assigned
  • milestone set to 1.1

caleb, do you have a CLA on file? I'd love to help you implemenet this into the 1.1 repo.

Changed 8 months ago by guest

Yes, actually I do. I don't have commit access but I sent in a CLA a few months ago, you should have it under "Caleb Maclennan".

Changed 8 months ago by dante

  • summary changed from [dojox][patch] combobox with multiple values to [dojox][cla][patch] combobox with multiple values

awesome, thanks. i'll review the bottom of the two code blocks. in the future, please use the 'attach file' button after creating a ticket to supply a patch. Trac does wonderful things with highlighting and diff's, and makes it easier to download, etc.

Changed 8 months ago by dante

would it be too much to ask to attach some sample data and a test case for this?

Changed 8 months ago by guest

Changed 8 months ago by guest

Changed 8 months ago by guest

Changed 8 months ago by guest

The three files I just attached should serve as a basic demonstration of the functionality, or you can check out the sample sample page running on live data on my devel server at http://dojo.ouraycolorado.com/sample.html.

Changed 8 months ago by dante

  • status changed from assigned to closed
  • resolution set to fixed

(In [11639]) fixes #2589 - initial checkin of experimental dojox widget to provide character-delimited inputs from a common store. code from Caleb Maclennan CLA on file. Thanks. Its neat, and works kind of well. expanded test case to show alternate useage, and programatic build exposes weird positioning issue with the popup (or inconsistant behavior at least). minor style cleanups, too. also, there was an extra comma in your tagger.js file, so if you don't end up using this version, you should fix that otherwise. thanks again.

Note: See TracTickets for help on using tickets.