jQuery ui Combobox 扩展

jQuery ui 是一个UI的雏形， 一些UI都基于jQuery ui 开发，例如easy ui。

最近项目用jquery ui 做前台，需要用到 combobox组件， 如果用easy ui 需要引入很多其他的js比较麻烦， jquery ui Demo中  autocomplete 里面自带一个Combobox， 但一些功能不是我们想要的。
自己在上面增加了几个方法和事件。 并修改了对IE6支持的CSS 如下：

好处： 下拉框的样式随jquery ui 的样式改变而改变， 支持自动补全
不足： 方法需要自己扩展
————————————————————————————————————————
参数：
tip: "提示",
isReadonly: true, //默认下拉框值不可编辑， 如果设置为false， 那么下拉框支持自动补全

增加方法说明：
事件：
1.onChange： 当下拉框修改选中一条时候触发

方法：
主动设置下拉框内容
1.$( "#combobox" ).combobox('setSelect', 'option中value', 'option中text');

————————————————————————————————————————
测试：

Html：  
<select id="combobox">
...
</select>

依赖：  jquery ui 为1.9.1
需要依赖jquery ui、 jquery
<link rel="stylesheet" type="text/css" href="jquery/jqueryui/css/redmond/jquery-ui.custom.min.css" />
<link rel="stylesheet" type="text/css" href="jquery/jqueryui/combobox/jquery.combobox.css" />

<script src="jquery/jquery.min.js" type="text/javascript"></script>
<script src="jquery/jqueryui/js/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="jquery/jqueryui/combobox/jquery.combobox.js" type="text/javascript"></script>


$( "#combobox" ).combobox({
        tip: "鼠标划入下拉按钮时候会有提示！",
	onChange: function(option){
		alert($(option).attr('value'));
	}
});

(function( $ ) {
	$.widget( "ui.combobox", {
		version: "1.9.1",
		options: {
			tip: "",
			isReadonly: true,
			/**
			 * This event fire after selected select.
			 */
			onChange: function(option) {}
		},
		input: null,
		_create: function() {
			var that = this,
			select = this.element.hide(),
			selected = select.children( ":selected" ),
			value = selected.val() ? selected.text() : "",
			wrapper = this.wrapper = $( "<span>" )
				.addClass( "ui-combobox" )
				.insertAfter( select );

			function removeIfInvalid(element) {
				var value = $( element ).val(),
					matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
					valid = false;
				select.children( "option" ).each(function() {
					if ( $( this ).text().match( matcher ) ) {
						this.selected = valid = true;
						return false;
					}
				});
				if ( !valid ) {
					// remove invalid value, as it didn't match anything
					$( element )
						.val( "" )
						.attr( "title", value + " 没有匹配结果！" )
						.tooltip( "open" );
					select.val( "" );
					setTimeout(function() {
						input.tooltip( "close" ).attr( "title", "" );
					}, 2500 );
					input.data( "autocomplete" ).term = "";
					return false;
				}
			}

			input = $( "<input>" )
				.appendTo( wrapper )
				.val( value )
				.attr( "title", "" )
//				.addClass( "ui-state-default ui-combobox-input" )
				.addClass( "ui-combobox-input" )
				.autocomplete({
					delay: 0,
					minLength: 0,
					source: function( request, response ) {
						var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
						response( select.children( "option" ).map(function() {
							var text = $( this ).text();
							if ( this.value && ( !request.term || matcher.test(text) ) )
								return {
									label: text.replace(
										new RegExp(
											"(?![^&;]+;)(?!<[^<>]*)(" +
											$.ui.autocomplete.escapeRegex(request.term) +
											")(?![^<>]*>)(?![^&;]+;)", "gi"
										), "<strong>$1</strong>" ),
									value: text,
									option: this
								};
						}) );
					},
					select: function( event, ui ) {
						ui.item.option.selected = true;
						that._trigger( "selected", event, {
							item: ui.item.option
						});
						
						that.options.onChange(ui.item.option);
					},
					change: function( event, ui ) {
						if ( !ui.item )
							return removeIfInvalid( this );
					}
				})
				.addClass( "ui-widget ui-widget-content ui-corner-left" );

			input.data( "autocomplete" )._renderItem = function( ul, item ) {
				return $( "<li>" )
					.data( "item.autocomplete", item )
					.append( "<a>" + item.label + "</a>" )
					.appendTo( ul );
			};

			$( "<a>" )
				.attr( "tabIndex", -1 )
				.attr( "title", this.options.tip )
				.tooltip()
				.appendTo( wrapper )
				.button({
					icons: {
						primary: "ui-icon-triangle-1-s"
					},
					text: false
				})
				//移除
//				.removeClass( "ui-button" )
				.removeClass( "ui-corner-all" )
				.addClass( "ui-corner-right ui-combobox-toggle" )
				.click(function() {
					// close if already visible
					if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
						input.autocomplete( "close" );
						removeIfInvalid( input );
						return;
					}

					// work around a bug (likely same cause as #5265)
					$( this ).blur();

					// pass empty string as value to search for, displaying all results
					input.autocomplete( "search", "" );
					input.focus();
				});

				input
					.tooltip({
						position: {
							of: this.button
						},	
						tooltipClass: "ui-state-highlight"
					});
				
				if (this.options.isReadonly) {
					input.attr('readonly', true);
				}
		},

		destroy: function() {
			this.wrapper.remove();
			this.element.show();
			$.Widget.prototype.destroy.call( this );
		},
		/**
		 * Set input value 
		 * @param value option's value 
		 * @param text  option's text
		 */
		setSelect: function(value, text) {
			input.val(text);
		}
	});
})( jQuery );

CSS

.ui-combobox {
	position: relative;
	display: inline-block;
	padding-right: 20px;
}
.ui-combobox-toggle {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: -1px;
	padding: 0 0 0 0;
	/* adjust styles for IE 6/7 */
	*height: 16px;
	*top: 0.1em;
	PADDING-RIGHT: 0px;
	width: 20px;
}
.ui-combobox-input {
	margin: 0;
	padding: 0em;
	width: 120px;
}