Add ability to define new values on the fly.

tapx-core/src/main/resources/com/howardlewisship/tapx/core/tapx-core.css

@@ -169,4 +169,22 @@ DIV.tx-multiselect .tx-disabled {
   filter: alpha(opacity = 25);  /* IE 7 */
   opacity: .25; /* FireFox, Chrome, Safari */
   cursor: default;
+}
+
+DIV.tx-multiselect .tx-input {
+  clear: left;
+  padding-top: 5px;
+}
+
+DIV.tx-multiselect .tx-error {  
+  clear: left;
+  display: inline-block;
+  font-weight: bold;
+  font-color: red;
+  padding: 2px 18px 2px 2px;
+  margin-right: 16px;
+  background-color: ead38c;
+  background-image: url(silk/cancel.png);
+  background-repeat: no-repeat;
+  background-position: right center;
 }

tapx-core/src/main/resources/com/howardlewisship/tapx/core/tapx-multiselect.js

@@ -106,28 +106,36 @@ Tapx.extendInitializer(function() {
 				+ "<div class='tx-title'>Selected:</div>"
 				+ "<select multiple='multiple'></select></div>");
 
+		inputDiv = new Element("div", {
+			class : "tx-input"
+		});
+		outerDiv.insert(inputDiv);
+
+		inputDiv.update("<label>Add: <input type='text' size='40'>"
+				+ "<span class='tx-error'></div></label>");
+
 		var availableSelect = mainDiv.down(".tx-available > select");
 		var selectedSelect = mainDiv.down(".tx-selected > select");
 
 		(spec.model || []).each(function(row) {
 
 			var valueId = row[0];
 			var selected = (spec.values || []).include(valueId);
-			var divToUpdate = selected ? selectedSelect : availableSelect;
+			var selectElement = selected ? selectedSelect : availableSelect;
 
 			var option = new Element("option").update(row[1]);
 
 			option.txValue = {
 				clientValue : valueId
 			};
 
-			divToUpdate.insert(option);
+			selectElement.insert(option);
 		});
 
 		function rebuildHiddenFieldValue() {
-			// First array is the list of selected values (for values defined by
-			// the model) Second array is the list of selected labels (for
-			// values added on the client)
+			// First array is the list of selected values (for values
+			// defined by the model at initial render). Second array is the list
+			// of selected labels (for values added on the client)
 
 			var hiddenFieldValue = [ [], [] ];
 
@@ -156,6 +164,64 @@ Tapx.extendInitializer(function() {
 			rebuildHiddenFieldValue();
 		});
 
+		var errorDiv = inputDiv.down('.tx-error');
+
+		errorDiv.hide();
+
+		var inputField = inputDiv.down('input');
+
+		function error(message) {
+			inputField.addClassName("t-error").select();
+			errorDiv.update(message).show();
+		}
+
+		function addNewOption() {
+			var newLabel = inputField.value;
+
+			inputField.removeClassName("t-error");
+			errorDiv.hide().update();
+
+			if (newLabel === "")
+				return;
+
+			var allOptions = $A(availableSelect.options).concat(
+					$A(selectedSelect.options));
+
+			if (allOptions.any(function(opt) {
+				return opt.innerHTML === newLabel
+			})) {
+				error("Value already exists.");
+				return;
+			}
+
+			deselectAllOptions(selectedSelect);
+
+			var option = new Element("option", {
+				selected : true
+			}).update(newLabel);
+
+			option.txValue = {
+				label : newLabel
+			};
+
+			moveOption(option, selectedSelect);
+
+			rebuildHiddenFieldValue();
+
+			inputField.value = '';
+			inputField.focus();
+		}
+
+		inputField.observe("change", addNewOption);
+
+		inputField.observe("keypress", function(event) {
+			if (event.keyCode != Event.KEY_RETURN)
+				return;
+
+			event.stop();
+
+			addNewOption();
+		});
 	}
 
 	return {