agerix/jQuery-Autocomplete
2
0
Fork 0
mirror of https://github.com/devbridge/jQuery-Autocomplete.git synced 2024-12-23 03:18:55 +00:00
Code Issues Releases Activity

Added vertical orientation of suggestions.

Browse Source
This commit is contained in:
Tomek Główka 2014-07-27 01:39:20 +02:00
parent 09c4e18558
commit 46c1dd281d
2 changed files with 48 additions and 17 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.
* `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:

63
src/jquery.autocomplete.js
View File

@ -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;