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 comment:1
| milestone: | TBD → 1.8 |
|---|
Changed March 05, 2010 02:04AM UTC by comment:2
Changed March 23, 2010 07:14PM UTC by 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 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 July 19, 2010 09:10PM UTC by comment:6
| resolution: | → fixed |
|---|---|
| status: | new → closed |
Fixed in 612838a.
Changed August 04, 2010 01:10AM UTC by comment:7
| milestone: | 1.9 → 1.8.3 |
|---|
We have to consider the implications of position-related options across all plugins. See #2525.