Enhancement for jQuery Combobox

I have modified the jQuery Combobox demo (http://jqueryui.com/demos/autocomplete/#combobox), as outlined below. I give a detailed post about this here:

http://robertmarkbramprogrammer.blogspot.com/2010/09/event-handling-with-jquery-autocomplete.html

I changed parts of the original to make the combobox re-adjust to match the size of the underlying SELECT control. The original and modified versions are shown below for comparison.

// Original
var self = this;
var select = this.element.hide(),
 selected = select.children( ":selected" ),
 value = selected.val() ? selected.text() : "";
var input = $( "<input>" )
 
// Modified. Can you see Wally?
var self = this;
var select = this.element,
   theWidth = select.width(),
   selected = select.children( ":selected" ),
   value = selected.val() ? selected.text() : "";
select.hide();
var input = $( "<input style=\\"width:" + theWidth +

Although the width of the combobox should now match the width of the underlying SELECT, the font used in the jQuery theme can still screw up the effect. E.g. a comparatively large (or small) font will still make the combobox appear to be the wrong width (the HTML SELECT would just re-size itself).

Another change I made from the original was to ensure that the two elements (an INPUT and a BUTTON) are enclosed by a SPAN with white-space: nowrap to ensure that the controls always stay together and never wrap

// Original
var input = $( "<input>" )
.insertAfter( select )
.val( value )
 
// Modified, Part 1. Removed insertAfter.
var input = $( "<input>" )
.val( value )
 
// Modified, Part 2, added two lines after .addClass( "ui-widget...
.addClass( "ui-widget ui-widget-content ui-corner-left" );
var span = $("<span style=\\" white-space: nowrap;\\"></span>")
      .append(input).insertAfter( select );

Lastly is a CSS change.

<style type="text/css">
   .ui-button { margin-left: -1px; }
   .ui-button-icon-only .ui-button-text { padding: 0.35em; }
   .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
   .ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}
</style>

I added the last line to make sure the autocomplete portion would scroll on long lists - which would otherwise be unmanageable. I copied the code from this jQuery forum post: Autocomplete with vertical scrollbar (http://forum.jquery.com/topic/autocomplete-with-vertical-scrollbar). I am still not entirely happy with some aspects of the above CSS. It renders nicely on Firefox 3.6.8, Internet Explorer 8 and Chrome 6 - but the edges didn't line up correctly in Chrome 7 (Dev build): the text field seemed just a pixel or two taller than the button. Worse, zooming in and out in all of those browsers could also make the heights mis-match by just a pixel or so.