From 9134b96f23bf2855e554b9b98fd594ab14b6703f Mon Sep 17 00:00:00 2001 From: Miles Grimes Date: Sat, 11 Mar 2017 00:40:36 -0600 Subject: [PATCH 1/7] Added js, css, and documentation for renderNoResults, preventSource, sourcePrevented --- auto-complete.css | 2 +- auto-complete.js | 13 +++++++++---- demo.html | 23 +++++++++++++++++++++++ 3 files changed, 33 insertions(+), 5 deletions(-) diff --git a/auto-complete.css b/auto-complete.css index 4261b1d..634abaa 100644 --- a/auto-complete.css +++ b/auto-complete.css @@ -4,6 +4,6 @@ /* core styles should not be changed */ position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box; } -.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; } +.autocomplete-suggestion, .noresults-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; } .autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; } .autocomplete-suggestion.selected { background: #f0f0f0; } diff --git a/auto-complete.js b/auto-complete.js index 2f5a88c..005c3ae 100644 --- a/auto-complete.js +++ b/auto-complete.js @@ -43,7 +43,10 @@ var autoComplete = (function(){ var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi"); return '
' + item.replace(re, "$1") + '
'; }, - onSelect: function(e, term, item){} + onSelect: function(e, term, item){}, + renderNoResults: function() { return '
No results returned
'; }, + preventSource: function(val){ return false;}, + sourcePrevented: function(val) {} }; for (var k in options) { if (options.hasOwnProperty(k)) o[k] = options[k]; } @@ -123,8 +126,7 @@ var autoComplete = (function(){ that.sc.innerHTML = s; that.updateSC(0); } - else - that.sc.style.display = 'none'; + else that.sc.innerHTML = o.renderNoResults(); } that.keydownHandler = function(e){ @@ -174,7 +176,10 @@ var autoComplete = (function(){ if (part in that.cache && !that.cache[part].length) { suggest([]); return; } } } - that.timer = setTimeout(function(){ o.source(val, suggest) }, o.delay); + if (!o.preventSource(val)){ + that.timer = setTimeout(function(){ o.source(val, suggest) }, o.delay); + } + else o.sourcePrevented(val); } } else { that.last_val = val; diff --git a/demo.html b/demo.html index ab7b1a2..ae99b75 100644 --- a/demo.html +++ b/demo.html @@ -127,6 +127,15 @@

Settings

} + + renderNoResultfunction + +

A function that gives you control over what is displayed when there are no results to suggest. Default:

+
renderNoResults: function(){
+    return '<div class="noresults-suggestion">No results returned</div>';
+}
+ +   Callbacks @@ -136,6 +145,14 @@

Settings

term is the selected value. and item is the item rendered by the renderItem function. + preventSource(val) + A callback function that fires before the source function would normally be called to evaluate conditions, and should return a truthy value. + val is the currently entered value. + + sourcePrevented(val) + A callback function that fires when the preventSource function returns true and the source function is prevented. + val is the value previously passed to preventSource. +   Public Methods @@ -276,6 +293,12 @@

Advanced suggestions handling and custom layout

for (i=0;i Date: Sat, 11 Mar 2017 00:46:10 -0600 Subject: [PATCH 2/7] Added js and documentation for widthScale property. --- auto-complete.js | 5 +++-- demo.html | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/auto-complete.js b/auto-complete.js index 005c3ae..5ddfccf 100644 --- a/auto-complete.js +++ b/auto-complete.js @@ -46,7 +46,8 @@ var autoComplete = (function(){ onSelect: function(e, term, item){}, renderNoResults: function() { return '
No results returned
'; }, preventSource: function(val){ return false;}, - sourcePrevented: function(val) {} + sourcePrevented: function(val) {}, + widthScale: 1 }; for (var k in options) { if (options.hasOwnProperty(k)) o[k] = options[k]; } @@ -68,7 +69,7 @@ var autoComplete = (function(){ var rect = that.getBoundingClientRect(); that.sc.style.left = Math.round(rect.left + (window.pageXOffset || document.documentElement.scrollLeft) + o.offsetLeft) + 'px'; 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 + that.sc.style.width = (o.widthScale * Math.round(rect.right - rect.left)) + 'px'; // outerWidth if (!resize) { that.sc.style.display = 'block'; if (!that.sc.maxHeight) { that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight); } diff --git a/demo.html b/demo.html index ae99b75..7477bdb 100644 --- a/demo.html +++ b/demo.html @@ -136,6 +136,10 @@

Settings

} + + widthScale1 +

Optional coefficient applied to base suggestion width.

+   Callbacks From 6bb2dbc495534b7a5734cac3776442ba9b413fd1 Mon Sep 17 00:00:00 2001 From: Miles Grimes Date: Mon, 13 Mar 2017 18:06:06 -0500 Subject: [PATCH 3/7] Aligned Readme with added features --- readme.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/readme.md b/readme.md index 0a155c3..fc8d7c5 100644 --- a/readme.md +++ b/readme.md @@ -22,6 +22,10 @@ https://goodies.pixabay.com/javascript/auto-complete/demo.html ## Changelog +### Version 1.0.5 - 2016/03/10 + +* Added renderNoResults, preventSource, sourcePrevented, and widthScale options + ### Version 1.0.4 - 2016/02/10 * Included pull #6 and added offsetLeft/offsetTop as optional parameter for suggestions container. From 9db02940a0aca97d39412e1346fb7a2e0334a1d1 Mon Sep 17 00:00:00 2001 From: Miles Grimes Date: Mon, 13 Mar 2017 18:19:33 -0500 Subject: [PATCH 4/7] Fixed issue #35 on root project (Option to only cache exact queries), fixed last readme entry, added documentation for cache option --- auto-complete.js | 13 ++++++++----- demo.html | 2 +- readme.md | 2 +- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/auto-complete.js b/auto-complete.js index 5ddfccf..a33e3b8 100644 --- a/auto-complete.js +++ b/auto-complete.js @@ -171,11 +171,14 @@ var autoComplete = (function(){ clearTimeout(that.timer); if (o.cache) { if (val in that.cache) { suggest(that.cache[val]); return; } - // no requests if previous suggestions were empty - for (var i=1; iSettings delay150The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay is more responsive, but can produce a lot of load. offsetLeft0Optional left offset of the suggestions container. offsetTop1Optional top offset of the suggestions container. - cachetrueDetermines if performed searches should be cached. + cache1Determines if performed searches should be cached. Falsy values turn caching off, 1 turns on (legacy) non-strict cache-checking, any other numeric values turn on strict cache-checking. menuClass'' Custom class/es that get/s added to the dropdown menu container. diff --git a/readme.md b/readme.md index fc8d7c5..f1f40b0 100644 --- a/readme.md +++ b/readme.md @@ -22,7 +22,7 @@ https://goodies.pixabay.com/javascript/auto-complete/demo.html ## Changelog -### Version 1.0.5 - 2016/03/10 +### Version 1.0.5 - 2017/03/10 * Added renderNoResults, preventSource, sourcePrevented, and widthScale options From 306340e93fd993b5f8865f9c20b889840d89009a Mon Sep 17 00:00:00 2001 From: Miles Grimes Date: Mon, 13 Mar 2017 19:01:51 -0500 Subject: [PATCH 5/7] Implemented valueFilter functionality --- auto-complete.js | 11 ++++++----- demo.html | 7 +++++++ readme.md | 8 ++++++++ 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/auto-complete.js b/auto-complete.js index a33e3b8..c008c42 100644 --- a/auto-complete.js +++ b/auto-complete.js @@ -47,7 +47,8 @@ var autoComplete = (function(){ renderNoResults: function() { return '
No results returned
'; }, preventSource: function(val){ return false;}, sourcePrevented: function(val) {}, - widthScale: 1 + widthScale: 1, + valueFilter: function(val, lastVal) { return val; } }; for (var k in options) { if (options.hasOwnProperty(k)) o[k] = options[k]; } @@ -101,7 +102,7 @@ var autoComplete = (function(){ live('autocomplete-suggestion', 'mousedown', function(e){ if (hasClass(this, 'autocomplete-suggestion')) { // else outside click - var v = this.getAttribute('data-val'); + var v = that.valueFilter(this.getAttribute('data-val'), that.value); that.value = v; o.onSelect(e, v, this); that.sc.style.display = 'none'; @@ -138,15 +139,15 @@ var autoComplete = (function(){ if (!sel) { next = (key == 40) ? that.sc.querySelector('.autocomplete-suggestion') : that.sc.childNodes[that.sc.childNodes.length - 1]; // first : last next.className += ' selected'; - that.value = next.getAttribute('data-val'); + that.value = that.valueFilter(next.getAttribute('data-val'), that.value); } else { next = (key == 40) ? sel.nextSibling : sel.previousSibling; if (next) { sel.className = sel.className.replace('selected', ''); next.className += ' selected'; - that.value = next.getAttribute('data-val'); + that.value = that.valueFilter(next.getAttribute('data-val'), that.value); } - else { sel.className = sel.className.replace('selected', ''); that.value = that.last_val; next = 0; } + else { sel.className = sel.className.replace('selected', ''); that.value = that.valueFilter(that.last_val, that.val); next = 0; } } that.updateSC(0, next); return false; diff --git a/demo.html b/demo.html index 127d6d2..e33b0eb 100644 --- a/demo.html +++ b/demo.html @@ -157,6 +157,13 @@

Settings

A callback function that fires when the preventSource function returns true and the source function is prevented. val is the value previously passed to preventSource. + + valueFilter(val, lastVal) + A callback function that fires prior to onSelect, allowing exact specification of how the new value should be handled, to provide to onSelect. + val is the new value from the last selection. + lastVal is the value currently stored. + valueFilter should return the appropriate value to be stored. +   Public Methods diff --git a/readme.md b/readme.md index f1f40b0..20f05e4 100644 --- a/readme.md +++ b/readme.md @@ -22,6 +22,14 @@ https://goodies.pixabay.com/javascript/auto-complete/demo.html ## Changelog +### Version 1.0.7 - 2017/03/10 + +* Added valueFilter callback and documentation. + +### Version 1.0.6 - 2017/03/10 + +* Made cache: 1 implement old non-strict key cache searching, all other truthy values implement only strict caching. + ### Version 1.0.5 - 2017/03/10 * Added renderNoResults, preventSource, sourcePrevented, and widthScale options From 064fe96363f576555ce643f9f01b62d619b2e8b4 Mon Sep 17 00:00:00 2001 From: Miles Grimes Date: Wed, 15 Mar 2017 20:01:11 -0500 Subject: [PATCH 6/7] Mouseleave did not fire, so changed to mouseout event. Also fixed improper reference to valueFilter --- auto-complete.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/auto-complete.js b/auto-complete.js index c008c42..b3d84aa 100644 --- a/auto-complete.js +++ b/auto-complete.js @@ -89,7 +89,7 @@ var autoComplete = (function(){ addEvent(window, 'resize', that.updateSC); document.body.appendChild(that.sc); - live('autocomplete-suggestion', 'mouseleave', function(e){ + live('autocomplete-suggestion', 'mouseout', function(e){ var sel = that.sc.querySelector('.autocomplete-suggestion.selected'); if (sel) setTimeout(function(){ sel.className = sel.className.replace('selected', ''); }, 20); }, that.sc); @@ -102,7 +102,7 @@ var autoComplete = (function(){ live('autocomplete-suggestion', 'mousedown', function(e){ if (hasClass(this, 'autocomplete-suggestion')) { // else outside click - var v = that.valueFilter(this.getAttribute('data-val'), that.value); + var v = o.valueFilter(this.getAttribute('data-val'), that.value); that.value = v; o.onSelect(e, v, this); that.sc.style.display = 'none'; @@ -139,15 +139,15 @@ var autoComplete = (function(){ if (!sel) { next = (key == 40) ? that.sc.querySelector('.autocomplete-suggestion') : that.sc.childNodes[that.sc.childNodes.length - 1]; // first : last next.className += ' selected'; - that.value = that.valueFilter(next.getAttribute('data-val'), that.value); + that.value = o.valueFilter(next.getAttribute('data-val'), that.value); } else { next = (key == 40) ? sel.nextSibling : sel.previousSibling; if (next) { sel.className = sel.className.replace('selected', ''); next.className += ' selected'; - that.value = that.valueFilter(next.getAttribute('data-val'), that.value); + that.value = o.valueFilter(next.getAttribute('data-val'), that.value); } - else { sel.className = sel.className.replace('selected', ''); that.value = that.valueFilter(that.last_val, that.val); next = 0; } + else { sel.className = sel.className.replace('selected', ''); that.value = o.valueFilter(that.last_val, that.val); next = 0; } } that.updateSC(0, next); return false; From c870e018e1c7ae58edc51a3b178fa21f7716c08b Mon Sep 17 00:00:00 2001 From: Miles Grimes Date: Wed, 15 Mar 2017 20:02:42 -0500 Subject: [PATCH 7/7] Updated readme --- readme.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/readme.md b/readme.md index 20f05e4..11e23e4 100644 --- a/readme.md +++ b/readme.md @@ -22,6 +22,10 @@ https://goodies.pixabay.com/javascript/auto-complete/demo.html ## Changelog +### Version 1.0.7 - 2017/03/15 + +* Modified de-select handler to fire on mouseout, rather than mouseleave. Fixed improper valueFunction references. + ### Version 1.0.7 - 2017/03/10 * Added valueFilter callback and documentation.