#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: |
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 (9)
Changed 13 years ago by
Attachment: | jquery-autocomplete-position-patch.diff added |
---|
comment:1 Changed 13 years ago by
Milestone: | TBD → 1.8 |
---|
comment:2 Changed 13 years ago by
comment:3 Changed 13 years ago by
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
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:7 Changed 13 years ago by
Milestone: | 1.9 → 1.8.3 |
---|
comment:8 Changed 12 years ago by
Autocomplete: Added position option. Fixes #5153 - Autocomplete position option.
Changeset: 612838a1518c8cdc80b5bace5d925f89c1e791a3
We have to consider the implications of position-related options across all plugins. See #2525.