Autocomplete position option

[gwk]

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"
    }
});

[Scott González]

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

[Scott González]

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

[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.

[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');
		}
	}
};

[Scott González]

See #5458.

[Scott González]

Fixed in ​612838a.

[Scott González]

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

Changeset: 612838a1518c8cdc80b5bace5d925f89c1e791a3