Ticket #5153 (closed enhancement: fixed)

Opened 4 years ago

Last modified 3 years ago

Autocomplete position option

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


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"


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

Change History

Changed 4 years ago by gwk

comment:1 Changed 4 years ago by scott.gonzalez

  • Milestone changed from TBD to 1.8

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

comment:2 Changed 4 years ago by scott.gonzalez

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

comment:3 Changed 4 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 4 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(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');

comment:5 Changed 4 years ago by scott.gonzalez

  • Priority changed from minor to blocker

See #5458.

comment:6 Changed 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to fixed

Fixed in  612838a.

comment:7 Changed 4 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.3

comment:8 Changed 3 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.