2 * jQuery UI Autocomplete 1.8.2
4 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
5 * Dual licensed under the MIT (MIT-LICENSE.txt)
6 * and GPL (GPL-LICENSE.txt) licenses.
8 * http://docs.jquery.com/UI/Autocomplete
13 * jquery.ui.position.js
17 $.widget( "ui.autocomplete", {
24 doc
= this.element
[ 0 ].ownerDocument
;
26 .addClass( "ui-autocomplete-input" )
27 .attr( "autocomplete", "off" )
28 // TODO verify these actually work as intended
31 "aria-autocomplete": "list",
32 "aria-haspopup": "true"
34 .bind( "keydown.autocomplete", function( event
) {
35 var keyCode
= $.ui
.keyCode
;
36 switch( event
.keyCode
) {
38 self
._move( "previousPage", event
);
40 case keyCode
.PAGE_DOWN
:
41 self
._move( "nextPage", event
);
44 self
._move( "previous", event
);
45 // prevent moving cursor to beginning of text field in some browsers
46 event
.preventDefault();
49 self
._move( "next", event
);
50 // prevent moving cursor to end of text field in some browsers
51 event
.preventDefault();
54 case keyCode
.NUMPAD_ENTER
:
55 // when menu is open or has focus
56 if ( self
.menu
.active
) {
57 event
.preventDefault();
59 //passthrough - ENTER and TAB both select the current element
61 if ( !self
.menu
.active
) {
64 self
.menu
.select( event
);
67 self
.element
.val( self
.term
);
76 case keyCode
.COMMAND_RIGHT
:
78 case keyCode
.CAPS_LOCK
:
81 // ignore metakeys (shift, ctrl, alt)
84 // keypress is triggered before the input value is changed
85 clearTimeout( self
.searching
);
86 self
.searching
= setTimeout(function() {
87 self
.search( null, event
);
88 }, self
.options
.delay
);
92 .bind( "focus.autocomplete", function() {
93 self
.selectedItem
= null;
94 self
.previous
= self
.element
.val();
96 .bind( "blur.autocomplete", function( event
) {
97 clearTimeout( self
.searching
);
98 // clicks on the menu (or a button to trigger a search) will cause a blur event
99 self
.closing
= setTimeout(function() {
101 self
._change( event
);
105 this.response = function() {
106 return self
._response
.apply( self
, arguments
);
108 this.menu
= $( "<ul></ul>" )
109 .addClass( "ui-autocomplete" )
110 .appendTo( "body", doc
)
111 // prevent the close-on-blur in case of a "slow" click on the menu (long mousedown)
112 .mousedown(function() {
113 // use another timeout to make sure the blur-event-handler on the input was already triggered
114 setTimeout(function() {
115 clearTimeout( self
.closing
);
119 focus: function( event
, ui
) {
120 var item
= ui
.item
.data( "item.autocomplete" );
121 if ( false !== self
._trigger( "focus", null, { item
: item
} ) ) {
122 // use value to match what will end up in the input, if it was a key event
123 if ( /^key/.test(event
.originalEvent
.type
) ) {
124 self
.element
.val( item
.value
);
128 selected: function( event
, ui
) {
129 var item
= ui
.item
.data( "item.autocomplete" );
130 if ( false !== self
._trigger( "select", event
, { item
: item
} ) ) {
131 self
.element
.val( item
.value
);
134 // only trigger when focus was lost (click on menu)
135 var previous
= self
.previous
;
136 if ( self
.element
[0] !== doc
.activeElement
) {
137 self
.element
.focus();
138 self
.previous
= previous
;
140 self
.selectedItem
= item
;
142 blur: function( event
, ui
) {
143 if ( self
.menu
.element
.is(":visible") ) {
144 self
.element
.val( self
.term
);
148 .zIndex( this.element
.zIndex() + 1 )
149 // workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781
150 .css({ top
: 0, left
: 0 })
153 if ( $.fn
.bgiframe
) {
154 this.menu
.element
.bgiframe();
158 destroy: function() {
160 .removeClass( "ui-autocomplete-input" )
161 .removeAttr( "autocomplete" )
162 .removeAttr( "role" )
163 .removeAttr( "aria-autocomplete" )
164 .removeAttr( "aria-haspopup" );
165 this.menu
.element
.remove();
166 $.Widget
.prototype.destroy
.call( this );
169 _setOption: function( key
) {
170 $.Widget
.prototype._setOption
.apply( this, arguments
);
171 if ( key
=== "source" ) {
176 _initSource: function() {
179 if ( $.isArray(this.options
.source
) ) {
180 array
= this.options
.source
;
181 this.source = function( request
, response
) {
182 response( $.ui
.autocomplete
.filter(array
, request
.term
) );
184 } else if ( typeof this.options
.source
=== "string" ) {
185 url
= this.options
.source
;
186 this.source = function( request
, response
) {
187 $.getJSON( url
, request
, response
);
190 this.source
= this.options
.source
;
194 search: function( value
, event
) {
195 value
= value
!= null ? value
: this.element
.val();
196 if ( value
.length
< this.options
.minLength
) {
197 return this.close( event
);
200 clearTimeout( this.closing
);
201 if ( this._trigger("search") === false ) {
205 return this._search( value
);
208 _search: function( value
) {
209 this.term
= this.element
210 .addClass( "ui-autocomplete-loading" )
211 // always save the actual value, not the one passed as an argument
214 this.source( { term
: value
}, this.response
);
217 _response: function( content
) {
218 if ( content
.length
) {
219 content
= this._normalize( content
);
220 this._suggest( content
);
221 this._trigger( "open" );
225 this.element
.removeClass( "ui-autocomplete-loading" );
228 close: function( event
) {
229 clearTimeout( this.closing
);
230 if ( this.menu
.element
.is(":visible") ) {
231 this._trigger( "close", event
);
232 this.menu
.element
.hide();
233 this.menu
.deactivate();
237 _change: function( event
) {
238 if ( this.previous
!== this.element
.val() ) {
239 this._trigger( "change", event
, { item
: this.selectedItem
} );
243 _normalize: function( items
) {
244 // assume all items have the right format when the first item is complete
245 if ( items
.length
&& items
[0].label
&& items
[0].value
) {
248 return $.map( items
, function(item
) {
249 if ( typeof item
=== "string" ) {
256 label
: item
.label
|| item
.value
,
257 value
: item
.value
|| item
.label
262 _suggest: function( items
) {
263 var ul
= this.menu
.element
265 .zIndex( this.element
.zIndex() + 1 ),
268 this._renderMenu( ul
, items
);
269 // TODO refresh should check if the active item is still in the dom, removing the need for a manual deactivate
270 this.menu
.deactivate();
272 this.menu
.element
.show().position({
279 menuWidth
= ul
.width( "" ).width();
280 textWidth
= this.element
.width();
281 ul
.width( Math
.max( menuWidth
, textWidth
) );
284 _renderMenu: function( ul
, items
) {
286 $.each( items
, function( index
, item
) {
287 self
._renderItem( ul
, item
);
291 _renderItem: function( ul
, item
) {
292 return $( "<li></li>" )
293 .data( "item.autocomplete", item
)
294 .append( "<a>" + item
.label
+ "</a>" )
298 _move: function( direction
, event
) {
299 if ( !this.menu
.element
.is(":visible") ) {
300 this.search( null, event
);
303 if ( this.menu
.first() && /^previous/.test(direction
) ||
304 this.menu
.last() && /^next/.test(direction
) ) {
305 this.element
.val( this.term
);
306 this.menu
.deactivate();
309 this.menu
[ direction
]( event
);
313 return this.menu
.element
;
317 $.extend( $.ui
.autocomplete
, {
318 escapeRegex: function( value
) {
319 return value
.replace( /([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1" );
321 filter: function(array
, term
) {
322 var matcher
= new RegExp( $.ui
.autocomplete
.escapeRegex(term
), "i" );
323 return $.grep( array
, function(value
) {
324 return matcher
.test( value
.label
|| value
.value
|| value
);
332 * jQuery UI Menu (not officially released)
334 * This widget isn't yet finished and the API is subject to change. We plan to finish
335 * it for the next release. You're welcome to give it a try anyway and give us feedback,
336 * as long as you're okay with migrating your code later on. We can help with that, too.
338 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
339 * Dual licensed under the MIT (MIT-LICENSE.txt)
340 * and GPL (GPL-LICENSE.txt) licenses.
342 * http://docs.jquery.com/UI/Menu
346 * jquery.ui.widget.js
350 $.widget("ui.menu", {
351 _create: function() {
354 .addClass("ui-menu ui-widget ui-widget-content ui-corner-all")
357 "aria-activedescendant": "ui-active-menuitem"
359 .click(function( event
) {
360 if ( !$( event
.target
).closest( ".ui-menu-item a" ).length
) {
364 event
.preventDefault();
365 self
.select( event
);
370 refresh: function() {
373 // don't refresh list items that are already adapted
374 var items
= this.element
.children("li:not(.ui-menu-item):has(a)")
375 .addClass("ui-menu-item")
376 .attr("role", "menuitem");
379 .addClass("ui-corner-all")
380 .attr("tabindex", -1)
381 // mouseenter doesn't work with event delegation
382 .mouseenter(function( event
) {
383 self
.activate( event
, $(this).parent() );
385 .mouseleave(function() {
390 activate: function( event
, item
) {
392 if (this.hasScroll()) {
393 var offset
= item
.offset().top
- this.element
.offset().top
,
394 scroll
= this.element
.attr("scrollTop"),
395 elementHeight
= this.element
.height();
397 this.element
.attr("scrollTop", scroll
+ offset
);
398 } else if (offset
> elementHeight
) {
399 this.element
.attr("scrollTop", scroll
+ offset
- elementHeight
+ item
.height());
402 this.active
= item
.eq(0)
404 .addClass("ui-state-hover")
405 .attr("id", "ui-active-menuitem")
407 this._trigger("focus", event
, { item
: item
});
410 deactivate: function() {
411 if (!this.active
) { return; }
413 this.active
.children("a")
414 .removeClass("ui-state-hover")
416 this._trigger("blur");
420 next: function(event
) {
421 this.move("next", ".ui-menu-item:first", event
);
424 previous: function(event
) {
425 this.move("prev", ".ui-menu-item:last", event
);
429 return this.active
&& !this.active
.prev().length
;
433 return this.active
&& !this.active
.next().length
;
436 move: function(direction
, edge
, event
) {
438 this.activate(event
, this.element
.children(edge
));
441 var next
= this.active
[direction
+ "All"](".ui-menu-item").eq(0);
443 this.activate(event
, next
);
445 this.activate(event
, this.element
.children(edge
));
449 // TODO merge with previousPage
450 nextPage: function(event
) {
451 if (this.hasScroll()) {
452 // TODO merge with no-scroll-else
453 if (!this.active
|| this.last()) {
454 this.activate(event
, this.element
.children(":first"));
457 var base
= this.active
.offset().top
,
458 height
= this.element
.height(),
459 result
= this.element
.children("li").filter(function() {
460 var close
= $(this).offset().top
- base
- height
+ $(this).height();
461 // TODO improve approximation
462 return close
< 10 && close
> -10;
465 // TODO try to catch this earlier when scrollTop indicates the last page anyway
466 if (!result
.length
) {
467 result
= this.element
.children(":last");
469 this.activate(event
, result
);
471 this.activate(event
, this.element
.children(!this.active
|| this.last() ? ":first" : ":last"));
475 // TODO merge with nextPage
476 previousPage: function(event
) {
477 if (this.hasScroll()) {
478 // TODO merge with no-scroll-else
479 if (!this.active
|| this.first()) {
480 this.activate(event
, this.element
.children(":last"));
484 var base
= this.active
.offset().top
,
485 height
= this.element
.height();
486 result
= this.element
.children("li").filter(function() {
487 var close
= $(this).offset().top
- base
+ height
- $(this).height();
488 // TODO improve approximation
489 return close
< 10 && close
> -10;
492 // TODO try to catch this earlier when scrollTop indicates the last page anyway
493 if (!result
.length
) {
494 result
= this.element
.children(":first");
496 this.activate(event
, result
);
498 this.activate(event
, this.element
.children(!this.active
|| this.first() ? ":last" : ":first"));
502 hasScroll: function() {
503 return this.element
.height() < this.element
.attr("scrollHeight");
506 select: function( event
) {
507 this._trigger("selected", event
, { item
: this.active
});