Skip to content

Commit a1b9fbf

Browse files
scottgonzalezscottgonzalez
committed
Autocomplete: Remove uses of self var; use new APIs or that var.
1 parent acb704c commit a1b9fbf

File tree

1 file changed

+120
-126
lines changed

1 file changed

+120
-126
lines changed

‎ui/jquery.ui.autocomplete.js

Lines changed: 120 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,14 @@ $.widget( "ui.autocomplete", {
4646
pending: 0,
4747

4848
_create: function() {
49-
var self = this,
50-
// Some browsers only repeat keydown events, not keypress events,
51-
// so we use the suppressKeyPress flag to determine if we've already
52-
// handled the keydown event. #7269
53-
// Unfortunately the code for & in keypress is the same as the up arrow,
54-
// so we use the suppressKeyPressRepeat flag to avoid handling keypress
55-
// events when we know the keydown event was used to modify the
56-
// search term. #7799
57-
suppressKeyPress,
58-
suppressKeyPressRepeat,
59-
suppressInput;
49+
// Some browsers only repeat keydown events, not keypress events,
50+
// so we use the suppressKeyPress flag to determine if we've already
51+
// handled the keydown event. #7269
52+
// Unfortunately the code for & in keypress is the same as the up arrow,
53+
// so we use the suppressKeyPressRepeat flag to avoid handling keypress
54+
// events when we know the keydown event was used to modify the
55+
// search term. #7799
56+
var suppressKeyPress, suppressKeyPressRepeat, suppressInput;
6057

6158
this.isMultiLine = this.element.is( "textarea,[contenteditable]" );
6259
this.valueMethod = this.element[ this.element.is( "input,textarea" ) ? "val" : "text" ];
@@ -69,9 +66,11 @@ $.widget( "ui.autocomplete", {
6966
role: "textbox",
7067
"aria-autocomplete": "list",
7168
"aria-haspopup": "true"
72-
})
73-
.bind( "keydown.autocomplete", function( event ) {
74-
if ( self.options.disabled || self.element.prop( "readOnly" ) ) {
69+
});
70+
71+
this._bind({
72+
keydown: function( event ) {
73+
if ( this.element.prop( "readOnly" ) ) {
7574
suppressKeyPress = true;
7675
suppressInput = true;
7776
suppressKeyPressRepeat = true;
@@ -85,40 +84,40 @@ $.widget( "ui.autocomplete", {
8584
switch( event.keyCode ) {
8685
case keyCode.PAGE_UP:
8786
suppressKeyPress = true;
88-
self._move( "previousPage", event );
87+
this._move( "previousPage", event );
8988
break;
9089
case keyCode.PAGE_DOWN:
9190
suppressKeyPress = true;
92-
self._move( "nextPage", event );
91+
this._move( "nextPage", event );
9392
break;
9493
case keyCode.UP:
9594
suppressKeyPress = true;
96-
self._keyEvent( "previous", event );
95+
this._keyEvent( "previous", event );
9796
break;
9897
case keyCode.DOWN:
9998
suppressKeyPress = true;
100-
self._keyEvent( "next", event );
99+
this._keyEvent( "next", event );
101100
break;
102101
case keyCode.ENTER:
103102
case keyCode.NUMPAD_ENTER:
104103
// when menu is open and has focus
105-
if ( self.menu.active ) {
104+
if ( this.menu.active ) {
106105
// #6055 - Opera still allows the keypress to occur
107106
// which causes forms to submit
108107
suppressKeyPress = true;
109108
event.preventDefault();
110-
self.menu.select( event );
109+
this.menu.select( event );
111110
}
112111
break;
113112
case keyCode.TAB:
114-
if ( self.menu.active ) {
115-
self.menu.select( event );
113+
if ( this.menu.active ) {
114+
this.menu.select( event );
116115
}
117116
break;
118117
case keyCode.ESCAPE:
119-
if ( self.menu.element.is(":visible") ) {
120-
self._value( self.term );
121-
self.close( event );
118+
if ( this.menu.element.is(":visible") ) {
119+
this._value( this.term );
120+
this.close( event );
122121
// Different browsers have different default behavior for escape
123122
// Single press can mean undo or clear
124123
// Double press in IE means clear the whole form
@@ -128,11 +127,11 @@ $.widget( "ui.autocomplete", {
128127
default:
129128
suppressKeyPressRepeat = true;
130129
// search timeout should be triggered before the input value is changed
131-
self._searchTimeout( event );
130+
this._searchTimeout( event );
132131
break;
133132
}
134-
})
135-
.bind( "keypress.autocomplete", function( event ) {
133+
},
134+
keypress: function( event ) {
136135
if ( suppressKeyPress ) {
137136
suppressKeyPress = false;
138137
event.preventDefault();
@@ -146,129 +145,125 @@ $.widget( "ui.autocomplete", {
146145
var keyCode = $.ui.keyCode;
147146
switch( event.keyCode ) {
148147
case keyCode.PAGE_UP:
149-
self._move( "previousPage", event );
148+
this._move( "previousPage", event );
150149
break;
151150
case keyCode.PAGE_DOWN:
152-
self._move( "nextPage", event );
151+
this._move( "nextPage", event );
153152
break;
154153
case keyCode.UP:
155-
self._keyEvent( "previous", event );
154+
this._keyEvent( "previous", event );
156155
break;
157156
case keyCode.DOWN:
158-
self._keyEvent( "next", event );
157+
this._keyEvent( "next", event );
159158
break;
160159
}
161-
})
162-
.bind( "input.autocomplete", function(event) {
160+
},
161+
input: function( event ) {
163162
if ( suppressInput ) {
164163
suppressInput = false;
165164
event.preventDefault();
166165
return;
167166
}
168-
self._searchTimeout( event );
169-
})
170-
.bind( "focus.autocomplete", function() {
171-
if ( self.options.disabled ) {
167+
this._searchTimeout( event );
168+
},
169+
focus: function() {
170+
this.selectedItem = null;
171+
this.previous = this._value();
172+
},
173+
blur: function( event ) {
174+
if ( this.cancelBlur ) {
175+
delete this.cancelBlur;
172176
return;
173177
}
174178

175-
self.selectedItem = null;
176-
self.previous = self._value();
177-
})
178-
.bind( "blur.autocomplete", function( event ) {
179-
if ( self.options.disabled ) {
180-
return;
181-
}
182-
183-
if ( self.cancelBlur ) {
184-
delete self.cancelBlur;
185-
return;
186-
}
179+
clearTimeout( this.searching );
180+
this.close( event );
181+
this._change( event );
182+
}
183+
});
187184

188-
clearTimeout( self.searching );
189-
self.close( event );
190-
self._change( event );
191-
});
192185
this._initSource();
193186
this.menu = $( "<ul></ul>" )
194187
.addClass( "ui-autocomplete" )
195188
.appendTo( this.document.find( this.options.appendTo || "body" )[0] )
196-
// prevent the close-on-blur in case of a "slow" click on the menu (long mousedown)
197-
.mousedown(function( event ) {
189+
.menu({
190+
// custom key handling for now
191+
input: $()
192+
})
193+
.zIndex( this.element.zIndex() + 1 )
194+
.hide()
195+
.data( "menu" );
196+
this._bind( this.menu.element, {
197+
mousedown: function( event ) {
198198
// prevent moving focus out of the text field
199199
event.preventDefault();
200200

201201
// IE doesn't prevent moving focus even with event.preventDefault()
202202
// so we set a flag to know when we should ignore the blur event
203-
self.cancelBlur = true;
204-
setTimeout(function() {
205-
delete self.cancelBlur;
206-
}, 1 );
203+
this.cancelBlur = true;
204+
this._delay(function() {
205+
delete this.cancelBlur;
206+
});
207207

208208
// clicking on the scrollbar causes focus to shift to the body
209209
// but we can't detect a mouseup or a click immediately afterward
210210
// so we have to track the next mousedown and close the menu if
211211
// the user clicks somewhere outside of the autocomplete
212-
var menuElement = self.menu.element[ 0 ];
212+
var menuElement = this.menu.element[ 0 ];
213213
if ( !$( event.target ).closest( ".ui-menu-item" ).length ) {
214-
setTimeout(function() {
215-
self.document.one( 'mousedown', function( event ) {
216-
if ( event.target !== self.element[ 0 ] &&
217-
event.target !== menuElement &&
218-
!$.contains( menuElement, event.target ) ) {
219-
self.close();
214+
this._delay(function() {
215+
var that = this;
216+
this.document.one( 'mousedown', function( event ) {
217+
if ( event.target !== that.element[ 0 ] &&
218+
event.target !== menuElement &&
219+
!$.contains( menuElement, event.target ) ) {
220+
that.close();
220221
}
221222
});
222-
}, 1 );
223+
});
223224
}
224-
})
225-
.menu({
226-
// custom key handling for now
227-
input: $(),
228-
focus: function( event, ui ) {
229-
// back compat for _renderItem using item.autocomplete, via #7810
230-
// TODO remove the fallback, see #8156
231-
var item = ui.item.data( "ui-autocomplete-item" ) || ui.item.data( "item.autocomplete" );
232-
if ( false !== self._trigger( "focus", event, { item: item } ) ) {
233-
// use value to match what will end up in the input, if it was a key event
234-
if ( /^key/.test(event.originalEvent.type) ) {
235-
self._value( item.value );
236-
}
225+
},
226+
menufocus: function( event, ui ) {
227+
// back compat for _renderItem using item.autocomplete, via #7810
228+
// TODO remove the fallback, see #8156
229+
var item = ui.item.data( "ui-autocomplete-item" ) || ui.item.data( "item.autocomplete" );
230+
if ( false !== this._trigger( "focus", event, { item: item } ) ) {
231+
// use value to match what will end up in the input, if it was a key event
232+
if ( /^key/.test(event.originalEvent.type) ) {
233+
this._value( item.value );
237234
}
238-
},
239-
select: function( event, ui ) {
240-
// back compat for _renderItem using item.autocomplete, via #7810
241-
// TODO remove the fallback, see #8156
242-
var item = ui.item.data( "ui-autocomplete-item" ) || ui.item.data( "item.autocomplete" ),
243-
previous = self.previous;
244-
245-
// only trigger when focus was lost (click on menu)
246-
if ( self.element[0] !== self.document[0].activeElement ) {
247-
self.element.focus();
248-
self.previous = previous;
249-
// #6109 - IE triggers two focus events and the second
250-
// is asynchronous, so we need to reset the previous
251-
// term synchronously and asynchronously :-(
252-
setTimeout(function() {
253-
self.previous = previous;
254-
self.selectedItem = item;
255-
}, 1);
256-
}
257-
258-
if ( false !== self._trigger( "select", event, { item: item } ) ) {
259-
self._value( item.value );
260-
}
261-
// reset the term after the select event
262-
// this allows custom select handling to work properly
263-
self.term = self._value();
235+
}
236+
},
237+
menuselect: function( event, ui ) {
238+
// back compat for _renderItem using item.autocomplete, via #7810
239+
// TODO remove the fallback, see #8156
240+
var item = ui.item.data( "ui-autocomplete-item" ) || ui.item.data( "item.autocomplete" ),
241+
previous = this.previous;
242+
243+
// only trigger when focus was lost (click on menu)
244+
if ( this.element[0] !== this.document[0].activeElement ) {
245+
this.element.focus();
246+
this.previous = previous;
247+
// #6109 - IE triggers two focus events and the second
248+
// is asynchronous, so we need to reset the previous
249+
// term synchronously and asynchronously :-(
250+
setTimeout(function() {
251+
this.previous = previous;
252+
this.selectedItem = item;
253+
}, 1);
254+
}
264255

265-
self.close( event );
266-
self.selectedItem = item;
256+
if ( false !== this._trigger( "select", event, { item: item } ) ) {
257+
this._value( item.value );
267258
}
268-
})
269-
.zIndex( this.element.zIndex() + 1 )
270-
.hide()
271-
.data( "menu" );
259+
// reset the term after the select event
260+
// this allows custom select handling to work properly
261+
this.term = this._value();
262+
263+
this.close( event );
264+
this.selectedItem = item;
265+
}
266+
});
272267

273268
if ( $.fn.bgiframe ) {
274269
this.menu.element.bgiframe();
@@ -309,7 +304,7 @@ $.widget( "ui.autocomplete", {
309304
},
310305

311306
_initSource: function() {
312-
var self = this,
307+
var that = this,
313308
array,
314309
url;
315310
if ( $.isArray(this.options.source) ) {
@@ -320,10 +315,10 @@ $.widget( "ui.autocomplete", {
320315
} else if ( typeof this.options.source === "string" ) {
321316
url = this.options.source;
322317
this.source = function( request, response ) {
323-
if ( self.xhr ) {
324-
self.xhr.abort();
318+
if ( that.xhr ) {
319+
that.xhr.abort();
325320
}
326-
self.xhr = $.ajax({
321+
that.xhr = $.ajax({
327322
url: url,
328323
data: request,
329324
dataType: "json",
@@ -341,15 +336,14 @@ $.widget( "ui.autocomplete", {
341336
},
342337

343338
_searchTimeout: function( event ) {
344-
var self = this;
345-
clearTimeout( self.searching );
346-
self.searching = setTimeout(function() {
339+
clearTimeout( this.searching );
340+
this.searching = this._delay(function() {
347341
// only search if the value has changed
348-
if ( self.term !== self._value() ) {
349-
self.selectedItem = null;
350-
self.search( null, event );
342+
if ( this.term !== this._value() ) {
343+
this.selectedItem = null;
344+
this.search( null, event );
351345
}
352-
}, self.options.delay );
346+
}, this.options.delay );
353347
},
354348

355349
search: function( value, event ) {
@@ -478,9 +472,9 @@ $.widget( "ui.autocomplete", {
478472
},
479473

480474
_renderMenu: function( ul, items ) {
481-
var self = this;
475+
var that = this;
482476
$.each( items, function( index, item ) {
483-
self._renderItemData( ul, item );
477+
that._renderItemData( ul, item );
484478
});
485479
},
486480

0 commit comments

Comments
 (0)