Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support inverted display of suggestions #68

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Support inverted display of suggestions #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2048241
Add optional params parentElementId and invertScroll to support inver…
danwild Mar 7, 2018
88b9e2e
Update min.js version
danwild Mar 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions auto-complete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ var autoComplete = (function(){
offsetTop: 1,
cache: 1,
menuClass: '',
invertScroll: false,
parentElementId: 'body',
renderItem: function (item, search){
// escape special characters
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
Expand All @@ -52,9 +54,10 @@ var autoComplete = (function(){
for (var i=0; i<elems.length; i++) {
var that = elems[i];

// create suggestions container "sc"
that.sc = document.createElement('div');
that.sc.className = 'autocomplete-suggestions '+o.menuClass;
// create container and suggestions div "sc"
var container = document.getElementById(o.parentElementId);
that.sc = document.createElement('div');
that.sc.className = 'autocomplete-suggestions '+o.menuClass;

that.autocompleteAttr = that.getAttribute('autocomplete');
that.setAttribute('autocomplete', 'off');
Expand All @@ -71,7 +74,12 @@ var autoComplete = (function(){
if (!that.sc.maxHeight) { that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight); }
if (!that.sc.suggestionHeight) that.sc.suggestionHeight = that.sc.querySelector('.autocomplete-suggestion').offsetHeight;
if (that.sc.suggestionHeight)
if (!next) that.sc.scrollTop = 0;
if (!next && !o.invertScroll) that.sc.scrollTop = 0;
else if(o.invertScroll){
if(that.sc.scrollHeight > that.sc.maxHeight){
that.sc.scrollTop = that.sc.scrollHeight;
}
}
else {
var scrTop = that.sc.scrollTop, selTop = next.getBoundingClientRect().top - that.sc.getBoundingClientRect().top;
if (selTop + that.sc.suggestionHeight - that.sc.maxHeight > 0)
Expand All @@ -80,9 +88,10 @@ var autoComplete = (function(){
that.sc.scrollTop = selTop + scrTop;
}
}
}
};

addEvent(window, 'resize', that.updateSC);
document.body.appendChild(that.sc);
container.appendChild(that.sc);

live('autocomplete-suggestion', 'mouseleave', function(e){
var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
Expand Down
2 changes: 1 addition & 1 deletion auto-complete.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 15 additions & 1 deletion demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,21 @@ <h3>Settings</h3>
<tr><td>offsetLeft</td><td><i>0</i></td><td>Optional left offset of the suggestions container.</td></tr>
<tr><td>offsetTop</td><td><i>1</i></td><td>Optional top offset of the suggestions container.</td></tr>
<tr><td>cache</td><td><i>true</i></td><td>Determines if performed searches should be cached.</td></tr>
<tr>
<tr>
<td>invertScroll</td><td><i>false</i></td>
<td>If true, ensures suggestions at the bottom of the list are scrolled into view first.
<br/>Why? If your input element is in the footer, you may need to display suggestions <em>above</em> the
input - with best suggestions at the bottom of the list instead of the top.<br/>
Note that the default css does not support inverted autocomplete (you need to define this yourself).
</td>
</tr>
<tr>
<td>parentElementId</td><td><i>'body'</i></td>
<td>Custom container div to append autocomplete suggestions.
<br>Example: <span class="inline-code">{ parentElementId: 'my-container' }</span>
</td>
</tr>
<tr>
<td>menuClass</td><td><i>''</i></td>
<td>Custom class/es that get/s added to the dropdown menu container.
<br>Example: <span class="inline-code">{ menuClass: 'class1 class2' }</span></td>
Expand Down