agerix/jQuery-Autocomplete
2
0
Fork 0
mirror of https://github.com/devbridge/jQuery-Autocomplete.git synced 2024-11-14 09:14:09 +00:00
Code Issues Releases Activity

FixPosition supports not just body, but any appendTo node.

Browse Source
This commit is contained in:
Tomek Główka 2014-07-27 14:54:07 +02:00
parent 46c1dd281d
commit f69a9d0c5e
2 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
readme.md
View File

@ -46,6 +46,8 @@ The standard jquery.autocomplete.js file is around 2.7KB when minified via Closu
* `dataType`: type of data returned from server. Either 'text' (default) or 'jsonp', which will cause the autocomplete to use jsonp. You may return a json object in your callback when using jsonp. * `dataType`: type of data returned from server. Either 'text' (default) or 'jsonp', which will cause the autocomplete to use jsonp. You may return a json object in your callback when using jsonp.
* `showNoSuggestionNotice`: Default `false`. When no matching results, display a notification label. * `showNoSuggestionNotice`: Default `false`. When no matching results, display a notification label.
* `noSuggestionNotice`: Default `No results`. Text for no matching results label. * `noSuggestionNotice`: Default `No results`. Text for no matching results label.
* `forceFixPosition`: Default: `false`. Suggestions are automatically positioned when their container is appended to body (look at `appendTo` option), in other cases suggestions are rendered but no positioning is applied.
Set this option to force auto positioning in other cases.
* `orientation`: Default `bottom`. Vertical orientation of the displayed suggestions, available values are `auto`, `top`, `bottom`. * `orientation`: Default `bottom`. Vertical orientation of the displayed suggestions, available values are `auto`, `top`, `bottom`.
If set to `auto`, the suggestions will be orientated it the way that place them closer to middle of the view port. If set to `auto`, the suggestions will be orientated it the way that place them closer to middle of the view port.

42
src/jquery.autocomplete.js
View File

@ -86,7 +86,8 @@
}, },
showNoSuggestionNotice: false, showNoSuggestionNotice: false,
noSuggestionNotice: 'No results', noSuggestionNotice: 'No results',
orientation: 'bottom' orientation: 'bottom',
forceFixPosition: false
}; };
// Shared variables: // Shared variables:
@ -248,19 +249,21 @@
}, },
fixPosition: function () { fixPosition: function () {
var that = this; var that = this,
if (that.options.appendTo != 'body' ) $container = $(that.suggestionsContainer),
containerParent = $container.parent().get(0);
// Fix position automatically when appended to body.
// In other cases force parameter must be given.
if (containerParent !== document.body && !that.options.forceFixPosition)
return; return;
// Choose orientation
var orientation = that.options.orientation, var orientation = that.options.orientation,
$container = $(that.suggestionsContainer),
containerHeight = $container.outerHeight(), containerHeight = $container.outerHeight(),
height = that.el.outerHeight(), height = that.el.outerHeight(),
offset = that.el.offset(), offset = that.el.offset(),
styles = { styles = { 'top': offset.top, 'left': offset.left };
'top': offset.top,
'left': offset.left
};
if (orientation == 'auto') { if (orientation == 'auto') {
var viewPortHeight = $(window).height(), var viewPortHeight = $(window).height(),
@ -274,11 +277,28 @@
orientation = 'bottom'; orientation = 'bottom';
} }
if (orientation === 'bottom') if (orientation === 'top')
styles.top += height; styles.top += -containerHeight;
else else
styles.top += -containerHeight; styles.top += height;
// If container is not positioned to body,
// correct its position using offset parent offset
if(containerParent !== document.body) {
var opacity = $container.css('opacity'),
parentOffsetDiff;
if (!that.visible)
$container.css('opacity', 0).show();
parentOffsetDiff = $container.offsetParent().offset();
styles.top -= parentOffsetDiff.top;
styles.left -= parentOffsetDiff.left;
if (!that.visible)
$container.css('opacity', opacity).hide();
}
// -2px to account for suggestions border.
if (that.options.width === 'auto') { if (that.options.width === 'auto') {
styles.width = (that.el.outerWidth() - 2) + 'px'; styles.width = (that.el.outerWidth() - 2) + 'px';
} }