So I upgraded to jQuery UI version 1.8.2 at work and thought that I should instead of using the autocomplete plugin which is deprecated, switch over to use the jQuery UI build-in autocomplete widget.

jQuery UI autocomplete widget is NOTHING like the original jQuery autocomplete plugin!!!

At least by jQuery UI version 1.8.2 it’s not.

The jQuery UI autocomplete widget is crap just like I remembered when it first came out.

Things I found that annoyed the heck out of me:

• Highlight doesn’t work. Use this hack instead.
• Must match doesn’t work. More info available here.
  I ended up using a separate javascript function I wrote.

  function jQueryUIAutoCompleteMustMatch(input) {
  	var found = 0;
  	
  	var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( jQuery.trim($(input).val()) ) + "$", "i" );
  	
  	jQuery.each($('.ui-autocomplete li'), function(i, val) {
  		if(jQuery.trim( $(val).text() ).match( matcher ) ) {
  			found = 1;
  		}
  	});
  	
  	if (found) {
  		return true;
  	} else {
  		$(input).val('');
  		return false;
  	}
  }
  

  inside of your autocomplete setup, do

  change: function(event, ui) {jQueryUIAutoCompleteMustMatch($(this));}
  

• To mimic the scrollHeight property on the autocomplete plugin, you will need to use css overrides. More info here (Example).

  .ui-autocomplete {
  	max-height: 220px;
  	overflow-y: auto;
  	/* prevent horizontal scrollbar */
  	overflow-x: hidden;
  	/* add padding to account for vertical scrollbar */
  	padding-right: 20px;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
  	height: 220px;
  }
  

• To mimic the behavior of the option formatResult in the original plugin, you may do something like:

  $( "#tags" ).autocomplete({
  	source: availableTags,
  	minLength: 0,
  	delay: 0,
  	close: function(event, ui) {
  		var numberOnly = $(this).val().match(/\d+/);
  		$(this).val(numberOnly);
  	}
  })
  ;
  

  Above is to format the result as number only.

• If you want the pop up search results as soon as the user has the focus on the input without entering anything, you will need to bind the search call on the focus event of the input. More info here.
  I ended up with

  $(input).autocomplete({
  		source: list
  	})
  	.focus(function() {
  		$(this).autocomplete("search");
  	})
  	;
  

• I finally recognized that the jQuery UI autocomplete widget has far fewer options you may set. For example, by version 1.8.2, below are the only options
  • disabled
  • appendTo
  • autoFocus
  • delay
  • minLength
  • position
  • source

  If you wish to get your autocomplete working the same as your old one, chances are you will need to add a lot more additional code/hack.

This is the biggest disappointment for me since I started using jQuery.

>>> My Example with everything configured the way I want <<<