Opened 13 years ago

Closed 12 years ago

#2589 closed enhancement (fixed)

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

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

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 (3)

dijit.Tagger.js (1.5 KB) - added by guest 12 years ago.
tagger.html (1.1 KB) - added by guest 12 years ago.
tagger.json (1.9 KB) - added by guest 12 years ago.

Download all attachments as: .zip

Change History (14)

comment:1 Changed 12 years ago by bill

Component: WidgetsDojox
Owner: bill deleted

comment:2 Changed 12 years 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@….

comment:3 Changed 12 years 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);
			}
		}
	);
});

comment:5 Changed 12 years 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);
			},
		}
	);
});

comment:6 Changed 12 years ago by dante

Cc: caleb@… added
Milestone: 1.1
Owner: set to dante
Status: newassigned
Summary: combobox with multiple values[dojox][patch] combobox with multiple values

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

comment:7 Changed 12 years 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".

comment:8 Changed 12 years ago by dante

Summary: [dojox][patch] combobox with multiple values[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.

comment:9 Changed 12 years ago by dante

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

Changed 12 years ago by guest

Attachment: dijit.Tagger.js added

Changed 12 years ago by guest

Attachment: tagger.html added

Changed 12 years ago by guest

Attachment: tagger.json added

comment:10 Changed 12 years 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.

comment:11 Changed 12 years ago by dante

Resolution: fixed
Status: assignedclosed

(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.