mirror of
https://github.com/devbridge/jQuery-Autocomplete.git
synced 2024-11-09 14:50:57 +00:00
Added vertical orientation of suggestions.
This commit is contained in:
parent
09c4e18558
commit
46c1dd281d
@ -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.
|
||||
* `showNoSuggestionNotice`: Default `false`. When no matching results, display a notification label.
|
||||
* `noSuggestionNotice`: Default `No results`. Text for no matching results label.
|
||||
* `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.
|
||||
|
||||
Autocomplete instance has following methods:
|
||||
|
||||
|
@ -85,7 +85,8 @@
|
||||
return typeof response === 'string' ? $.parseJSON(response) : response;
|
||||
},
|
||||
showNoSuggestionNotice: false,
|
||||
noSuggestionNotice: 'No results'
|
||||
noSuggestionNotice: 'No results',
|
||||
orientation: 'bottom'
|
||||
};
|
||||
|
||||
// Shared variables:
|
||||
@ -173,8 +174,6 @@
|
||||
that.select($(this).data('index'));
|
||||
});
|
||||
|
||||
that.fixPosition();
|
||||
|
||||
that.fixPositionCapture = function () {
|
||||
if (that.visible) {
|
||||
that.fixPosition();
|
||||
@ -214,6 +213,8 @@
|
||||
options.lookup = that.verifySuggestionsFormat(options.lookup);
|
||||
}
|
||||
|
||||
options.orientation = that.validateOrientation(options.orientation, 'bottom');
|
||||
|
||||
// Adjust height, width and z-index:
|
||||
$(that.suggestionsContainer).css({
|
||||
'max-height': options.maxHeight + 'px',
|
||||
@ -222,6 +223,7 @@
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
clearCache: function () {
|
||||
this.cachedResponse = {};
|
||||
this.badQueries = [];
|
||||
@ -246,27 +248,42 @@
|
||||
},
|
||||
|
||||
fixPosition: function () {
|
||||
var that = this,
|
||||
offset,
|
||||
styles;
|
||||
|
||||
// Don't adjsut position if custom container has been specified:
|
||||
if (that.options.appendTo !== 'body') {
|
||||
var that = this;
|
||||
if (that.options.appendTo != 'body' )
|
||||
return;
|
||||
|
||||
var orientation = that.options.orientation,
|
||||
$container = $(that.suggestionsContainer),
|
||||
containerHeight = $container.outerHeight(),
|
||||
height = that.el.outerHeight(),
|
||||
offset = that.el.offset(),
|
||||
styles = {
|
||||
'top': offset.top,
|
||||
'left': offset.left
|
||||
};
|
||||
|
||||
if (orientation == 'auto') {
|
||||
var viewPortHeight = $(window).height(),
|
||||
scrollTop = $(window).scrollTop(),
|
||||
top_overflow = -scrollTop + offset.top - containerHeight,
|
||||
bottom_overflow = scrollTop + viewPortHeight - (offset.top + height + containerHeight);
|
||||
|
||||
if (Math.max(top_overflow, bottom_overflow) === top_overflow)
|
||||
orientation = 'top';
|
||||
else
|
||||
orientation = 'bottom';
|
||||
}
|
||||
|
||||
offset = that.el.offset();
|
||||
|
||||
styles = {
|
||||
top: (offset.top + that.el.outerHeight()) + 'px',
|
||||
left: offset.left + 'px'
|
||||
};
|
||||
if (orientation === 'bottom')
|
||||
styles.top += height;
|
||||
else
|
||||
styles.top += -containerHeight;
|
||||
|
||||
if (that.options.width === 'auto') {
|
||||
styles.width = (that.el.outerWidth() - 2) + 'px';
|
||||
}
|
||||
|
||||
$(that.suggestionsContainer).css(styles);
|
||||
$container.css(styles);
|
||||
},
|
||||
|
||||
enableKillerFn: function () {
|
||||
@ -589,6 +606,8 @@
|
||||
beforeRender.call(that.element, container);
|
||||
}
|
||||
|
||||
that.fixPosition();
|
||||
|
||||
container.show();
|
||||
that.visible = true;
|
||||
|
||||
@ -600,11 +619,14 @@
|
||||
container = $(that.suggestionsContainer),
|
||||
html = '',
|
||||
width;
|
||||
|
||||
|
||||
html += '<div class="autocomplete-no-suggestion">' + this.options.noSuggestionNotice + '</div>';
|
||||
|
||||
this.adjustContainerWidth();
|
||||
container.html(html);
|
||||
|
||||
that.fixPosition();
|
||||
|
||||
container.show();
|
||||
that.visible = true;
|
||||
},
|
||||
@ -669,6 +691,13 @@
|
||||
return suggestions;
|
||||
},
|
||||
|
||||
validateOrientation: function(orientation, fallback) {
|
||||
orientation = orientation.trim().toLowerCase();
|
||||
if(['auto', 'bottom', 'top'].indexOf(orientation) == '-1')
|
||||
orientation = fallback;
|
||||
return orientation
|
||||
},
|
||||
|
||||
processResponse: function (result, originalQuery, cacheKey) {
|
||||
var that = this,
|
||||
options = that.options;
|
||||
|
Loading…
Reference in New Issue
Block a user