combobox-with-adding.js

// Extra JQuery Extensions and Widgets
(function($) {
	$.widget("ui.combobox", {
		_create: function() {
			var self = this;
			this.select = this.element.hide();
			var select = this.select;
			var id = select.attr('id');
			var initial = $(select).find(":selected").text();
			if (!initial){
				initial = '';
			}
			var input = $("<input/>")
				.insertAfter(select)
				.val(initial)
				.autocomplete({
					last_item:null,
					source: function(request, response) {
						var matcher = new RegExp(request.term, "i");
						response(select.children("option").map(function() {
							var text = $(this).text();
							if (this.value && (!request.term || matcher.test(text)))
								var last_item = {
										id: this.value,
										label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
										value: text
									};
								this.last_item = last_item;
								return last_item;
						}));
					},
					delay: 0,
					change: function(event, ui) {
						if (!ui.item) {
							// remove invalid value, as it didn't match anything
// 							$(this).val("");
// 							return false;
                return true;
						}
						
						$(select).val(ui.item.id);
						if (select.val() == '' || select.val() == null){
							select.val(ui.item.value);
						}
						self._trigger("selected", event, {
							item: select.find("[value='" + ui.item.id + "']")
						});
						this.current_item = ui.item;
						
					},
					minLength: 0
				})
				.addClass("ui-widget ui-widget-content ui-corner-left");
			this.input = input;
			$("<button>&nbsp;</button>")
				.attr("tabIndex", -1)
				.attr("title", "Show All Items")
				.insertAfter(input)
				.button({
					icons: {
						primary: "ui-icon-triangle-1-s"
					},
					text: false
				}).removeClass("ui-corner-all")
				.addClass("ui-corner-right ui-button-icon")
				.click(function() {
					// close if already visible
					if (input.autocomplete("widget").is(":visible")) {
						input.autocomplete("close");
						return false;
					}
					// pass empty string as value to search for, displaying all results
					input.autocomplete("search", "");
					input.focus();
					return false;
				});
		},
		set: function (value){
			if (!value) {
				return false;
			}
			var select = this.select,
				input = this.input;
			this.select.children("option").each(function(){
				if (this.text == value){
					input.val(this.text);
					select.val(this.value);
					return false;
				};
			});
			
		},
		set_empty: function (value){
			if (this.input.val() == '' || this.input.val() == '---------'){
				this.set(value);
			}
		},
		initial: function (initial){
			if (!initial){
				initial = '';
			}
			this.input.val(initial);
		}
	});

})(jQuery);