Opened 13 years ago

Closed 13 years ago

Last modified 12 years ago

#5153 closed enhancement (fixed)

Autocomplete position option

Reported by: gwk Owned by:
Priority: blocker Milestone: 1.8.3
Component: ui.autocomplete Version: 1.8rc1
Keywords: Cc:
Blocked by: Blocking:


Attactched is patch to the autocomplete component which allows the user to specify custom positioning for the autocomplete menu. In our usecase the input field is in the top right of the page so creating the ui control as follows makes it work correctly.

    source: "/autocomplete.json",
    position: {
        my: "right top",
        at: "right bottom"

Attachments (1)

jquery-autocomplete-position-patch.diff (770 bytes) - added by gwk 13 years ago.

Download all attachments as: .zip

Change History (9)

Changed 13 years ago by gwk

comment:1 Changed 13 years ago by Scott González

Milestone: TBD1.8

We have to consider the implications of position-related options across all plugins. See #2525.

comment:2 Changed 13 years ago by Scott González

See #5279 for a use case where the default positioning should be set to flip. This requires smart collision detection (#5284).

comment:3 Changed 13 years ago by theojapa

Will this patch handle the case when the autocomplete component is positioned near the bottom of the page? In this case, would like the autocomplete menu to appear above the autocomplete component rather than below it.

My specific use case: I'm using the autocomplete in a scrollable/editable table that takes nearly the entire window. When editing cells in the bottom rows of the table, autocomplete menu position is a problem.

comment:4 Changed 13 years ago by theojapa

Achieved the above by using the open callback:

open: function(event, ui) {
	// open function is called before autocomplete menu is displayed, 
	// so use timeout of 0 trick to let autocomplete finish 
	setTimeout(function() { apple.hc.checkAutocompletePosition(inputObj); }, 0);

To call the following function:

// position autocomplete menu above autocomplete component if no room below
apple.hc.checkAutocompletePosition = function(inputObj) {
	var offset = $('.ui-autocomplete').offset(),
		heightMenu = $('.ui-autocomplete').outerHeight();
		heightComp = inputObj.outerHeight(),
		spaceAbove = undefined,
		spaceBelow = undefined;
	if( + heightMenu > window.innerHeight) {
		// not enough room below component; check if above is better
		spaceBelow = window.innerHeight -;
		spaceAbove = inputObj.offset().top;
		if(spaceAbove > spaceBelow) {
			$('.ui-autocomplete').css('top', (spaceAbove - heightMenu) + 'px');

comment:5 Changed 13 years ago by Scott González

Priority: minorblocker

See #5458.

comment:6 Changed 13 years ago by Scott González

Resolution: fixed
Status: newclosed

Fixed in 612838a.

comment:7 Changed 13 years ago by Scott González


comment:8 Changed 12 years ago by Scott González

Autocomplete: Added position option. Fixes #5153 - Autocomplete position option.

Changeset: 612838a1518c8cdc80b5bace5d925f89c1e791a3

Note: See TracTickets for help on using tickets.