Applying effects to the drop-down menu
By default, we get a fairly simplistic presentation of the drop-down menu containing suggestions for completion based on what we type. The menu is simply displayed, without much fuss. Which is fine, it gets the job done reliably. But, on the other hand, there is always something we can do to make the UI look more polished. It could be as simple as changing the autocomplete widget in your application to use some subtle effects while transitioning to a visible state.
Getting ready
Since what we're after here is really more of a visual presentation aspect of the widget, we're probably safe using any existing instance of the widget.
How to do it...
Let's build on the default implementation of the autocomplete widget to include some subtle animations for the drop-down menu.
( function( $, undefined ) {
$.widget( "ab.autocomplete", $.ui.autocomplete, {
_suggest: function( items ) {
this._resetMenu();
this._renderMenu( this.menu.element...
