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

Merge renderNoResult, preventSource, sourcePrevented, and widthScale features #42

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

Merge renderNoResult, preventSource, sourcePrevented, and widthScale features #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9134b96
Added js, css, and documentation for renderNoResults, preventSource, …
Mar 11, 2017
9876972
Added js and documentation for widthScale property.
Mar 11, 2017
6bb2dbc
Aligned Readme with added features
Mar 13, 2017
9db0294
Fixed issue #35 on root project (Option to only cache exact queries),…
Mar 13, 2017
306340e
Implemented valueFilter functionality
Mar 14, 2017
064fe96
Mouseleave did not fire, so changed to mouseout event. Also fixed imp…
Mar 16, 2017
c870e01
Updated readme
Mar 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion auto-complete.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
40 changes: 25 additions & 15 deletions auto-complete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,12 @@ var autoComplete = (function(){
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
},
onSelect: function(e, term, item){}
onSelect: function(e, term, item){},
renderNoResults: function() { return '<div class="noresults-suggestion">No results returned</div>'; },
preventSource: function(val){ return false;},
sourcePrevented: function(val) {},
widthScale: 1,
valueFilter: function(val, lastVal) { return val; }
};
for (var k in options) { if (options.hasOwnProperty(k)) o[k] = options[k]; }

Expand All @@ -65,7 +70,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); }
Expand All @@ -84,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);
Expand All @@ -97,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 = o.valueFilter(this.getAttribute('data-val'), that.value);
that.value = v;
o.onSelect(e, v, this);
that.sc.style.display = 'none';
Expand All @@ -123,8 +128,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){
Expand All @@ -135,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 = 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 = next.getAttribute('data-val');
that.value = o.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 = o.valueFilter(that.last_val, that.val); next = 0; }
}
that.updateSC(0, next);
return false;
Expand All @@ -168,13 +172,19 @@ 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; i<val.length-o.minChars; i++) {
var part = val.slice(0, val.length-i);
if (part in that.cache && !that.cache[part].length) { suggest([]); return; }
}
//other truthy numeric values of course invoke "strict" cache usage
else if (o.cache == 1) {
// no requests if previous suggestions were empty
for (var i=1; i<val.length-o.minChars; i++) {
var part = val.slice(0, val.length-i);
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;
Expand Down
36 changes: 35 additions & 1 deletion demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ <h3>Settings</h3>
<tr><td>delay</td><td>150</td><td>The 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.</td></tr>
<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><td>cache</td><td><i>1</i></td><td>Determines 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.</td></tr>
<tr>
<td>menuClass</td><td><i>''</i></td>
<td>Custom class/es that get/s added to the dropdown menu container.
Expand All @@ -127,6 +127,19 @@ <h3>Settings</h3>
}</code></pre>
</td>
</tr>
<tr>
<td>renderNoResult</td><td><i>function</i></td>
<td>
<p>A function that gives you control over what is displayed when there are no results to suggest. Default:</p>
<pre class="prettyprint" style="white-space:pre-wrap"><code>renderNoResults: function(){
return '&lt;div class=&quot;noresults-suggestion&quot;&gt;No results returned&lt;/div&gt;';
}</code></pre>
</td>
</tr>
<tr>
<td>widthScale</td><td><i>1</i></td>
<td><p>Optional coefficient applied to base suggestion width.</p></td>
</tr>

<tr><td colspan="3">&nbsp;</td></tr>
<tr><th>Callbacks</th><th colspan="2"></th></tr>
Expand All @@ -136,6 +149,21 @@ <h3>Settings</h3>
<span class="inline-code">term</span> is the selected value.
and <span class="inline-code">item</span> is the item rendered by the renderItem function.
</td></tr>
<tr><td>preventSource(val)</td><td colspan="2">
A callback function that fires before the source function would normally be called to evaluate conditions, and should return a truthy value.
<span class="inline-code">val</span> is the currently entered value.
</td></tr>
<tr><td>sourcePrevented(val)</td><td colspan="2">
A callback function that fires when the preventSource function returns true and the source function is prevented.
<span class="inline-code">val</span> is the value previously passed to preventSource.
</td></tr>
<tr>
<td>valueFilter(val, lastVal)</td><td colspan="2">
A callback function that fires prior to onSelect, allowing exact specification of how the new value should be handled, to provide to onSelect.
<span class="inline-code">val</span> is the new value from the last selection.
<span class="inline-code">lastVal<span> is the value currently stored.
valueFilter should return the appropriate value to be stored.
</tr>

<tr><td colspan="3">&nbsp;</td></tr>
<tr><th>Public Methods</th><th colspan="2"></th></tr>
Expand Down Expand Up @@ -276,6 +304,12 @@ <h4>Advanced suggestions handling and custom layout</h4>
for (i=0;i<choices.length;i++)
if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
suggest(suggestions);
},
preventSource: function(val) {
return "python".substring(0, val.length) === val.toLowerCase();
},
sourcePrevented: function(val) {
if (val.toLowerCase() === 'python') alert('I don\'t make suggestions for snakes! (Maybe their AJAX requests take too long to return?)');
}
});

Expand Down
16 changes: 16 additions & 0 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,22 @@ 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.

### 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

### Version 1.0.4 - 2016/02/10

* Included pull #6 and added offsetLeft/offsetTop as optional parameter for suggestions container.
Expand Down