diff --git a/auto-complete.js b/auto-complete.js
index 2f5a88c..b71ad17 100644
--- a/auto-complete.js
+++ b/auto-complete.js
@@ -8,11 +8,19 @@
var autoComplete = (function(){
// "use strict";
function autoComplete(options){
+ var is_scrolling = false;
if (!document.querySelector) return;
// helpers
function hasClass(el, className){ return el.classList ? el.classList.contains(className) : new RegExp('\\b'+ className+'\\b').test(el.className); }
+ function hideSuggestions(elementSuggestions) {
+ if (elementSuggestions.sc.style.display !== 'none') {
+ o.onHideSuggestions();
+ }
+ elementSuggestions.sc.style.display = 'none';
+ }
+
function addEvent(el, type, handler){
if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
}
@@ -43,6 +51,8 @@ var autoComplete = (function(){
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
return '
' + item.replace(re, "$1") + '
';
},
+ onShowSuggestions: function() {},
+ onHideSuggestions: function() {},
onSelect: function(e, term, item){}
};
for (var k in options) { if (options.hasOwnProperty(k)) o[k] = options[k]; }
@@ -67,6 +77,9 @@ var autoComplete = (function(){
that.sc.style.top = Math.round(rect.bottom + (window.pageYOffset || document.documentElement.scrollTop) + o.offsetTop) + 'px';
that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth
if (!resize) {
+ if (that.sc.style.display !== 'block') {
+ o.onShowSuggestions();
+ }
that.sc.style.display = 'block';
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;
@@ -100,7 +113,24 @@ var autoComplete = (function(){
var v = this.getAttribute('data-val');
that.value = v;
o.onSelect(e, v, this);
- that.sc.style.display = 'none';
+ hideSuggestions(that);
+ }
+ }, that.sc);
+
+ live('autocomplete-suggestion', 'touchstart', function(e){
+ is_scrolling = false;
+ }, that.sc);
+
+ live('autocomplete-suggestion', 'touchmove', function(e){
+ is_scrolling = true;
+ }, that.sc);
+
+ live('autocomplete-suggestion', 'touchend', function(e){
+ if (!is_scrolling) {
+ var v = this.getAttribute('data-val');
+ that.value = v;
+ o.onSelect(e, v, this);
+ hideSuggestions(that);
}
}, that.sc);
@@ -108,8 +138,8 @@ var autoComplete = (function(){
try { var over_sb = document.querySelector('.autocomplete-suggestions:hover'); } catch(e){ var over_sb = 0; }
if (!over_sb) {
that.last_val = that.value;
- that.sc.style.display = 'none';
- setTimeout(function(){ that.sc.style.display = 'none'; }, 350); // hide suggestions on fast input
+ hideSuggestions(that);
+ setTimeout(function(){ hideSuggestions(that); }, 350); // hide suggestions on fast input
} else if (that !== document.activeElement) setTimeout(function(){ that.focus(); }, 20);
};
addEvent(that, 'blur', that.blurHandler);
@@ -123,8 +153,9 @@ var autoComplete = (function(){
that.sc.innerHTML = s;
that.updateSC(0);
}
- else
- that.sc.style.display = 'none';
+ else {
+ hideSuggestions(that);
+ }
}
that.keydownHandler = function(e){
@@ -149,11 +180,16 @@ var autoComplete = (function(){
return false;
}
// esc
- else if (key == 27) { that.value = that.last_val; that.sc.style.display = 'none'; }
+ else if (key == 27) { that.value = that.last_val; hideSuggestions(that); }
// enter
else if (key == 13 || key == 9) {
var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
- if (sel && that.sc.style.display != 'none') { o.onSelect(e, sel.getAttribute('data-val'), sel); setTimeout(function(){ that.sc.style.display = 'none'; }, 20); }
+ if (sel && that.sc.style.display != 'none') {
+ o.onSelect(e, sel.getAttribute('data-val'), sel);
+ setTimeout(function(){
+ hideSuggestions(that);
+ }, 20);
+ }
}
};
addEvent(that, 'keydown', that.keydownHandler);
@@ -178,7 +214,7 @@ var autoComplete = (function(){
}
} else {
that.last_val = val;
- that.sc.style.display = 'none';
+ hideSuggestions(that);
}
}
};
@@ -219,4 +255,4 @@ var autoComplete = (function(){
module.exports = autoComplete;
else
window.autoComplete = autoComplete;
-})();
+})();
\ No newline at end of file