2 * jQuery UI Autocomplete 1.9.0
5 * Copyright 2012 jQuery Foundation and other contributors
6 * Released under the MIT license.
7 * http://jquery.org/license
9 * http://api.jqueryui.com/autocomplete/
14 * jquery.ui.position.js
17 (function( $, undefined ) {
19 // used to prevent race conditions with remote data sources
22 $.widget( "ui.autocomplete", {
24 defaultElement
: "<input>",
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
57 var suppressKeyPress
, suppressKeyPressRepeat
, suppressInput
;
59 this.isMultiLine
= this._isMultiLine();
60 this.valueMethod
= this.element
[ this.element
.is( "input,textarea" ) ? "val" : "text" ];
61 this.isNewMenu
= true;
64 .addClass( "ui-autocomplete-input" )
65 .attr( "autocomplete", "off" );
68 keydown: function( event
) {
69 if ( this.element
.prop( "readOnly" ) ) {
70 suppressKeyPress
= true;
72 suppressKeyPressRepeat
= true;
76 suppressKeyPress
= false;
77 suppressInput
= false;
78 suppressKeyPressRepeat
= false;
79 var keyCode
= $.ui
.keyCode
;
80 switch( event
.keyCode
) {
82 suppressKeyPress
= true;
83 this._move( "previousPage", event
);
85 case keyCode
.PAGE_DOWN
:
86 suppressKeyPress
= true;
87 this._move( "nextPage", event
);
90 suppressKeyPress
= true;
91 this._keyEvent( "previous", event
);
94 suppressKeyPress
= true;
95 this._keyEvent( "next", event
);
98 case keyCode
.NUMPAD_ENTER
:
99 // when menu is open and has focus
100 if ( this.menu
.active
) {
101 // #6055 - Opera still allows the keypress to occur
102 // which causes forms to submit
103 suppressKeyPress
= true;
104 event
.preventDefault();
105 this.menu
.select( event
);
109 if ( this.menu
.active
) {
110 this.menu
.select( event
);
114 if ( this.menu
.element
.is( ":visible" ) ) {
115 this._value( this.term
);
117 // Different browsers have different default behavior for escape
118 // Single press can mean undo or clear
119 // Double press in IE means clear the whole form
120 event
.preventDefault();
124 suppressKeyPressRepeat
= true;
125 // search timeout should be triggered before the input value is changed
126 this._searchTimeout( event
);
130 keypress: function( event
) {
131 if ( suppressKeyPress
) {
132 suppressKeyPress
= false;
133 event
.preventDefault();
136 if ( suppressKeyPressRepeat
) {
140 // replicate some key handlers to allow them to repeat in Firefox and Opera
141 var keyCode
= $.ui
.keyCode
;
142 switch( event
.keyCode
) {
143 case keyCode
.PAGE_UP
:
144 this._move( "previousPage", event
);
146 case keyCode
.PAGE_DOWN
:
147 this._move( "nextPage", event
);
150 this._keyEvent( "previous", event
);
153 this._keyEvent( "next", event
);
157 input: function( event
) {
158 if ( suppressInput
) {
159 suppressInput
= false;
160 event
.preventDefault();
163 this._searchTimeout( event
);
166 this.selectedItem
= null;
167 this.previous
= this._value();
169 blur: function( event
) {
170 if ( this.cancelBlur
) {
171 delete this.cancelBlur
;
175 clearTimeout( this.searching
);
177 this._change( event
);
182 this.menu
= $( "<ul>" )
183 .addClass( "ui-autocomplete" )
184 .appendTo( this.document
.find( this.options
.appendTo
|| "body" )[ 0 ] )
186 // custom key handling for now
188 // disable ARIA support, the live region takes care of that
191 .zIndex( this.element
.zIndex() + 1 )
194 this._on( this.menu
.element
, {
195 mousedown: function( event
) {
196 // prevent moving focus out of the text field
197 event
.preventDefault();
199 // IE doesn't prevent moving focus even with event.preventDefault()
200 // so we set a flag to know when we should ignore the blur event
201 this.cancelBlur
= true;
202 this._delay(function() {
203 delete this.cancelBlur
;
206 // clicking on the scrollbar causes focus to shift to the body
207 // but we can't detect a mouseup or a click immediately afterward
208 // so we have to track the next mousedown and close the menu if
209 // the user clicks somewhere outside of the autocomplete
210 var menuElement
= this.menu
.element
[ 0 ];
211 if ( !$( event
.target
).closest( ".ui-menu-item" ).length
) {
212 this._delay(function() {
214 this.document
.one( "mousedown", function( event
) {
215 if ( event
.target
!== that
.element
[ 0 ] &&
216 event
.target
!== menuElement
&&
217 !$.contains( menuElement
, event
.target
) ) {
224 menufocus: function( event
, ui
) {
225 // #7024 - Prevent accidental activation of menu items in Firefox
226 if ( this.isNewMenu
) {
227 this.isNewMenu
= false;
228 if ( event
.originalEvent
&& /^mouse/.test( event
.originalEvent
.type
) ) {
231 this.document
.one( "mousemove", function() {
232 $( event
.target
).trigger( event
.originalEvent
);
239 // back compat for _renderItem using item.autocomplete, via #7810
240 // TODO remove the fallback, see #8156
241 var item
= ui
.item
.data( "ui-autocomplete-item" ) || ui
.item
.data( "item.autocomplete" );
242 if ( false !== this._trigger( "focus", event
, { item
: item
} ) ) {
243 // use value to match what will end up in the input, if it was a key event
244 if ( event
.originalEvent
&& /^key/.test( event
.originalEvent
.type
) ) {
245 this._value( item
.value
);
248 // Normally the input is populated with the item's value as the
249 // menu is navigated, causing screen readers to notice a change and
250 // announce the item. Since the focus event was canceled, this doesn't
251 // happen, so we update the live region so that screen readers can
252 // still notice the change and announce it.
253 this.liveRegion
.text( item
.value
);
256 menuselect: function( event
, ui
) {
257 // back compat for _renderItem using item.autocomplete, via #7810
258 // TODO remove the fallback, see #8156
259 var item
= ui
.item
.data( "ui-autocomplete-item" ) || ui
.item
.data( "item.autocomplete" ),
260 previous
= this.previous
;
262 // only trigger when focus was lost (click on menu)
263 if ( this.element
[0] !== this.document
[0].activeElement
) {
264 this.element
.focus();
265 this.previous
= previous
;
266 // #6109 - IE triggers two focus events and the second
267 // is asynchronous, so we need to reset the previous
268 // term synchronously and asynchronously :-(
269 this._delay(function() {
270 this.previous
= previous
;
271 this.selectedItem
= item
;
275 if ( false !== this._trigger( "select", event
, { item
: item
} ) ) {
276 this._value( item
.value
);
278 // reset the term after the select event
279 // this allows custom select handling to work properly
280 this.term
= this._value();
283 this.selectedItem
= item
;
287 this.liveRegion
= $( "<span>", {
289 "aria-live": "polite"
291 .addClass( "ui-helper-hidden-accessible" )
292 .insertAfter( this.element
);
294 if ( $.fn
.bgiframe
) {
295 this.menu
.element
.bgiframe();
298 // turning off autocomplete prevents the browser from remembering the
299 // value when navigating through history, so we re-enable autocomplete
300 // if the page is unloaded before the widget is destroyed. #7790
301 this._on( this.window
, {
302 beforeunload: function() {
303 this.element
.removeAttr( "autocomplete" );
308 _destroy: function() {
309 clearTimeout( this.searching
);
311 .removeClass( "ui-autocomplete-input" )
312 .removeAttr( "autocomplete" );
313 this.menu
.element
.remove();
314 this.liveRegion
.remove();
317 _setOption: function( key
, value
) {
318 this._super( key
, value
);
319 if ( key
=== "source" ) {
322 if ( key
=== "appendTo" ) {
323 this.menu
.element
.appendTo( this.document
.find( value
|| "body" )[0] );
325 if ( key
=== "disabled" && value
&& this.xhr
) {
330 _isMultiLine: function() {
331 // Textareas are always multi-line
332 if ( this.element
.is( "textarea" ) ) {
335 // Inputs are always single-line, even if inside a contentEditable element
336 // IE also treats inputs as contentEditable
337 if ( this.element
.is( "input" ) ) {
340 // All other element types are determined by whether or not they're contentEditable
341 return this.element
.prop( "isContentEditable" );
344 _initSource: function() {
347 if ( $.isArray(this.options
.source
) ) {
348 array
= this.options
.source
;
349 this.source = function( request
, response
) {
350 response( $.ui
.autocomplete
.filter( array
, request
.term
) );
352 } else if ( typeof this.options
.source
=== "string" ) {
353 url
= this.options
.source
;
354 this.source = function( request
, response
) {
362 success: function( data
, status
) {
371 this.source
= this.options
.source
;
375 _searchTimeout: function( event
) {
376 clearTimeout( this.searching
);
377 this.searching
= this._delay(function() {
378 // only search if the value has changed
379 if ( this.term
!== this._value() ) {
380 this.selectedItem
= null;
381 this.search( null, event
);
383 }, this.options
.delay
);
386 search: function( value
, event
) {
387 value
= value
!= null ? value
: this._value();
389 // always save the actual value, not the one passed as an argument
390 this.term
= this._value();
392 if ( value
.length
< this.options
.minLength
) {
393 return this.close( event
);
396 if ( this._trigger( "search", event
) === false ) {
400 return this._search( value
);
403 _search: function( value
) {
405 this.element
.addClass( "ui-autocomplete-loading" );
406 this.cancelSearch
= false;
408 this.source( { term
: value
}, this._response() );
411 _response: function() {
413 index
= ++requestIndex
;
415 return function( content
) {
416 if ( index
=== requestIndex
) {
417 that
.__response( content
);
421 if ( !that
.pending
) {
422 that
.element
.removeClass( "ui-autocomplete-loading" );
427 __response: function( content
) {
429 content
= this._normalize( content
);
431 this._trigger( "response", null, { content
: content
} );
432 if ( !this.options
.disabled
&& content
&& content
.length
&& !this.cancelSearch
) {
433 this._suggest( content
);
434 this._trigger( "open" );
436 // use ._close() instead of .close() so we don't cancel future searches
441 close: function( event
) {
442 this.cancelSearch
= true;
443 this._close( event
);
446 _close: function( event
) {
447 if ( this.menu
.element
.is( ":visible" ) ) {
448 this.menu
.element
.hide();
450 this.isNewMenu
= true;
451 this._trigger( "close", event
);
455 _change: function( event
) {
456 if ( this.previous
!== this._value() ) {
457 this._trigger( "change", event
, { item
: this.selectedItem
} );
461 _normalize: function( items
) {
462 // assume all items have the right format when the first item is complete
463 if ( items
.length
&& items
[0].label
&& items
[0].value
) {
466 return $.map( items
, function( item
) {
467 if ( typeof item
=== "string" ) {
474 label
: item
.label
|| item
.value
,
475 value
: item
.value
|| item
.label
480 _suggest: function( items
) {
481 var ul
= this.menu
.element
483 .zIndex( this.element
.zIndex() + 1 );
484 this._renderMenu( ul
, items
);
487 // size and position menu
490 ul
.position( $.extend({
492 }, this.options
.position
));
494 if ( this.options
.autoFocus
) {
499 _resizeMenu: function() {
500 var ul
= this.menu
.element
;
501 ul
.outerWidth( Math
.max(
502 // Firefox wraps long text (possibly a rounding bug)
503 // so we add 1px to avoid the wrapping (#7513)
504 ul
.width( "" ).outerWidth() + 1,
505 this.element
.outerWidth()
509 _renderMenu: function( ul
, items
) {
511 $.each( items
, function( index
, item
) {
512 that
._renderItemData( ul
, item
);
516 _renderItemData: function( ul
, item
) {
517 return this._renderItem( ul
, item
).data( "ui-autocomplete-item", item
);
520 _renderItem: function( ul
, item
) {
522 .append( $( "<a>" ).text( item
.label
) )
526 _move: function( direction
, event
) {
527 if ( !this.menu
.element
.is( ":visible" ) ) {
528 this.search( null, event
);
531 if ( this.menu
.isFirstItem() && /^previous/.test( direction
) ||
532 this.menu
.isLastItem() && /^next/.test( direction
) ) {
533 this._value( this.term
);
537 this.menu
[ direction
]( event
);
541 return this.menu
.element
;
544 _value: function( value
) {
545 return this.valueMethod
.apply( this.element
, arguments
);
548 _keyEvent: function( keyEvent
, event
) {
549 if ( !this.isMultiLine
|| this.menu
.element
.is( ":visible" ) ) {
550 this._move( keyEvent
, event
);
552 // prevents moving cursor to beginning/end of the text field in some browsers
553 event
.preventDefault();
558 $.extend( $.ui
.autocomplete
, {
559 escapeRegex: function( value
) {
560 return value
.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
562 filter: function(array
, term
) {
563 var matcher
= new RegExp( $.ui
.autocomplete
.escapeRegex(term
), "i" );
564 return $.grep( array
, function(value
) {
565 return matcher
.test( value
.label
|| value
.value
|| value
);
571 // live region extension, adding a `messages` option
572 // NOTE: This is an experimental API. We are still investigating
573 // a full solution for string manipulation and internationalization.
574 $.widget( "ui.autocomplete", $.ui
.autocomplete
, {
577 noResults
: "No search results.",
578 results: function( amount
) {
579 return amount
+ ( amount
> 1 ? " results are" : " result is" ) +
580 " available, use up and down arrow keys to navigate.";
585 __response: function( content
) {
587 this._superApply( arguments
);
588 if ( this.options
.disabled
|| this.cancelSearch
) {
591 if ( content
&& content
.length
) {
592 message
= this.options
.messages
.results( content
.length
);
594 message
= this.options
.messages
.noResults
;
596 this.liveRegion
.text( message
);