Skip to main content

Search and Top Navigation

#5153 closed enhancement (fixed)

Opened February 09, 2010 02:43PM UTC

Closed July 19, 2010 09:10PM UTC

Last modified November 19, 2010 06:26PM UTC

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:
Description

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.

$("input.ac").autocomplete({
    source: "/autocomplete.json",
    position: {
        my: "right top",
        at: "right bottom"
    }
});
Attachments (1)
Change History (8)

Changed February 09, 2010 07:54PM UTC by scottgonzalez comment:1

milestone: TBD1.8

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

Changed March 05, 2010 02:04AM UTC by scottgonzalez comment:2

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

Changed March 23, 2010 07:14PM UTC by theojapa comment:3

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.

Changed March 25, 2010 10:07PM UTC by theojapa comment:4

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(offset.top + heightMenu > window.innerHeight) {
		// not enough room below component; check if above is better
		spaceBelow = window.innerHeight - offset.top;
		spaceAbove = inputObj.offset().top;
		
		if(spaceAbove > spaceBelow) {
			$('.ui-autocomplete').css('top', (spaceAbove - heightMenu) + 'px');
		}
	}
};

Changed March 31, 2010 04:55PM UTC by scottgonzalez comment:5

priority: minorblocker

See #5458.

Changed July 19, 2010 09:10PM UTC by scottgonzalez comment:6

resolution: → fixed
status: newclosed

Fixed in 612838a.

Changed August 04, 2010 01:10AM UTC by scottgonzalez comment:7

milestone: 1.91.8.3

Changed November 19, 2010 06:26PM UTC by Scott González comment:8

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

Changeset: 612838a1518c8cdc80b5bace5d925f89c1e791a3