Autocomplete: Style updates

Ref #14246
This commit is contained in:
Alexander Schmitz 2015-08-24 09:04:59 -04:00
parent b2bf10e0ec
commit 14b3b607e5

View File

@ -65,6 +65,7 @@ $.widget( "ui.autocomplete", {
pending: 0, pending: 0,
_create: function() { _create: function() {
// Some browsers only repeat keydown events, not keypress events, // Some browsers only repeat keydown events, not keypress events,
// so we use the suppressKeyPress flag to determine if we've already // so we use the suppressKeyPress flag to determine if we've already
// handled the keydown event. #7269 // handled the keydown event. #7269
@ -120,8 +121,10 @@ $.widget( "ui.autocomplete", {
this._keyEvent( "next", event ); this._keyEvent( "next", event );
break; break;
case keyCode.ENTER: case keyCode.ENTER:
// when menu is open and has focus // when menu is open and has focus
if ( this.menu.active ) { if ( this.menu.active ) {
// #6055 - Opera still allows the keypress to occur // #6055 - Opera still allows the keypress to occur
// which causes forms to submit // which causes forms to submit
suppressKeyPress = true; suppressKeyPress = true;
@ -140,6 +143,7 @@ $.widget( "ui.autocomplete", {
this._value( this.term ); this._value( this.term );
} }
this.close( event ); this.close( event );
// Different browsers have different default behavior for escape // Different browsers have different default behavior for escape
// Single press can mean undo or clear // Single press can mean undo or clear
// Double press in IE means clear the whole form // Double press in IE means clear the whole form
@ -148,6 +152,7 @@ $.widget( "ui.autocomplete", {
break; break;
default: default:
suppressKeyPressRepeat = true; suppressKeyPressRepeat = true;
// search timeout should be triggered before the input value is changed // search timeout should be triggered before the input value is changed
this._searchTimeout( event ); this._searchTimeout( event );
break; break;
@ -210,6 +215,7 @@ $.widget( "ui.autocomplete", {
this.menu = $( "<ul>" ) this.menu = $( "<ul>" )
.appendTo( this._appendTo() ) .appendTo( this._appendTo() )
.menu( { .menu( {
// disable ARIA support, the live region takes care of that // disable ARIA support, the live region takes care of that
role: null role: null
} ) } )
@ -219,6 +225,7 @@ $.widget( "ui.autocomplete", {
this._addClass( this.menu.element, "ui-autocomplete", "ui-front" ); this._addClass( this.menu.element, "ui-autocomplete", "ui-front" );
this._on( this.menu.element, { this._on( this.menu.element, {
mousedown: function( event ) { mousedown: function( event ) {
// prevent moving focus out of the text field // prevent moving focus out of the text field
event.preventDefault(); event.preventDefault();
@ -259,6 +266,7 @@ $.widget( "ui.autocomplete", {
}, },
menufocus: function( event, ui ) { menufocus: function( event, ui ) {
var label, item; var label, item;
// support: Firefox // support: Firefox
// Prevent accidental activation of menu items in Firefox (#7024 #9118) // Prevent accidental activation of menu items in Firefox (#7024 #9118)
if ( this.isNewMenu ) { if ( this.isNewMenu ) {
@ -276,6 +284,7 @@ $.widget( "ui.autocomplete", {
item = ui.item.data( "ui-autocomplete-item" ); item = ui.item.data( "ui-autocomplete-item" );
if ( false !== this._trigger( "focus", event, { item: item } ) ) { if ( false !== this._trigger( "focus", event, { item: item } ) ) {
// use value to match what will end up in the input, if it was a key event // use value to match what will end up in the input, if it was a key event
if ( event.originalEvent && /^key/.test( event.originalEvent.type ) ) { if ( event.originalEvent && /^key/.test( event.originalEvent.type ) ) {
this._value( item.value ); this._value( item.value );
@ -297,6 +306,7 @@ $.widget( "ui.autocomplete", {
if ( this.element[ 0 ] !== $.ui.safeActiveElement( this.document[ 0 ] ) ) { if ( this.element[ 0 ] !== $.ui.safeActiveElement( this.document[ 0 ] ) ) {
this.element.trigger( "focus" ); this.element.trigger( "focus" );
this.previous = previous; this.previous = previous;
// #6109 - IE triggers two focus events and the second // #6109 - IE triggers two focus events and the second
// is asynchronous, so we need to reset the previous // is asynchronous, so we need to reset the previous
// term synchronously and asynchronously :-( // term synchronously and asynchronously :-(
@ -309,6 +319,7 @@ $.widget( "ui.autocomplete", {
if ( false !== this._trigger( "select", event, { item: item } ) ) { if ( false !== this._trigger( "select", event, { item: item } ) ) {
this._value( item.value ); this._value( item.value );
} }
// reset the term after the select event // reset the term after the select event
// this allows custom select handling to work properly // this allows custom select handling to work properly
this.term = this._value(); this.term = this._value();
@ -473,6 +484,7 @@ $.widget( "ui.autocomplete", {
this._suggest( content ); this._suggest( content );
this._trigger( "open" ); this._trigger( "open" );
} else { } else {
// use ._close() instead of .close() so we don't cancel future searches // use ._close() instead of .close() so we don't cancel future searches
this._close(); this._close();
} }
@ -499,6 +511,7 @@ $.widget( "ui.autocomplete", {
}, },
_normalize: function( items ) { _normalize: function( items ) {
// assume all items have the right format when the first item is complete // assume all items have the right format when the first item is complete
if ( items.length && items[ 0 ].label && items[ 0 ].value ) { if ( items.length && items[ 0 ].label && items[ 0 ].value ) {
return items; return items;
@ -538,6 +551,7 @@ $.widget( "ui.autocomplete", {
_resizeMenu: function() { _resizeMenu: function() {
var ul = this.menu.element; var ul = this.menu.element;
ul.outerWidth( Math.max( ul.outerWidth( Math.max(
// Firefox wraps long text (possibly a rounding bug) // Firefox wraps long text (possibly a rounding bug)
// so we add 1px to avoid the wrapping (#7513) // so we add 1px to avoid the wrapping (#7513)
ul.width( "" ).outerWidth() + 1, ul.width( "" ).outerWidth() + 1,