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

[jan831@…]

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)

[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@….

[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);
			}
		}
	);
});

[guest]

http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/input-widget-tagging http://dojotoolkit.org/forum/dojo-core/dojo-core-support/customize-dojo-combobox-widget

[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);
			},
		}
	);
});

[dante]

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

[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".

[dante]

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.

[dante]

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

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

[dante]

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