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