2011-11-09 20:51:07 +04:00
|
|
|
/* Simple autocomplete for text inputs, with the support for multiple selection.
|
2012-10-13 18:29:46 +04:00
|
|
|
|
2011-11-09 21:11:16 +04:00
|
|
|
Homepage: http://yourcmc.ru/wiki/SimpleAutocomplete
|
2012-10-13 18:32:01 +04:00
|
|
|
License: MPL 2.0+ (http://www.mozilla.org/MPL/2.0/)
|
2012-10-13 18:29:46 +04:00
|
|
|
(c) Vitaliy Filippov 2011-2012
|
|
|
|
|
2011-11-08 18:14:01 +04:00
|
|
|
Usage:
|
2011-11-09 20:51:07 +04:00
|
|
|
Include hinter.css, hinter.js on your page. Then write:
|
2013-01-09 19:30:44 +04:00
|
|
|
var hint = new SimpleAutocomplete(input, dataLoader, params);
|
2012-10-13 18:29:46 +04:00
|
|
|
|
2011-11-08 18:14:01 +04:00
|
|
|
Parameters:
|
2011-11-09 20:51:07 +04:00
|
|
|
input
|
2011-11-09 21:11:16 +04:00
|
|
|
The input, either id or DOM element reference (the input must have an id anyway).
|
2013-01-17 22:59:14 +04:00
|
|
|
dataLoader(hint, value[, more])
|
2011-11-09 20:51:07 +04:00
|
|
|
Callback which should load autocomplete options and then call
|
2013-01-17 22:59:14 +04:00
|
|
|
hint.replaceItems(newOptions, keepPosition), where:
|
|
|
|
newOptions is [ [ name, value ], [ name, value ], ... ] and
|
|
|
|
keepPosition should be true when more was > 0.
|
|
|
|
Callback parameters:
|
|
|
|
hint
|
|
|
|
This SimpleAutocomplete object
|
|
|
|
value
|
|
|
|
The string guess should be done based on
|
|
|
|
more
|
|
|
|
This is optional and means the times user has triggered 'load more items'.
|
|
|
|
i.e. if the original list had 10 items (more=0), after first 'more' click
|
|
|
|
user would expect 20 items (more=1), and etc.
|
|
|
|
See also moreMarker option below.
|
2012-10-13 18:29:46 +04:00
|
|
|
|
2013-01-09 19:30:44 +04:00
|
|
|
params attribute is an object with optional parameters:
|
2011-11-09 20:51:07 +04:00
|
|
|
multipleDelimiter
|
|
|
|
Pass a delimiter string (for example ',' or ';') to enable multiple selection.
|
|
|
|
Item values cannot have leading or trailing whitespace. Input value will consist
|
|
|
|
of selected item values separated by this delimiter plus single space.
|
|
|
|
dataLoader should handle it's 'value' parameter accordingly in this case,
|
|
|
|
because it will be just the raw value of the input, probably with incomplete
|
|
|
|
item or items, typed by the user.
|
2011-11-09 21:11:16 +04:00
|
|
|
onChangeListener(hint, index)
|
2011-11-09 20:51:07 +04:00
|
|
|
Callback which is called when input value is changed using this dropdown.
|
2011-11-09 21:11:16 +04:00
|
|
|
index is the number of element which selection is changed, starting with 0.
|
2011-11-09 20:51:07 +04:00
|
|
|
It must be used instead of normal 'onchange' event.
|
|
|
|
maxHeight
|
|
|
|
Maximum hint dropdown height in pixels
|
|
|
|
emptyText
|
|
|
|
Text to show when dataLoader returns no options.
|
|
|
|
If emptyText === false, the hint will be hidden instead of showing text.
|
2012-01-11 19:45:21 +04:00
|
|
|
allowHTML
|
|
|
|
If true, HTML code will be allowed in option names.
|
2013-03-05 19:39:26 +04:00
|
|
|
promptHTML
|
|
|
|
The HTML code to be displayed before the option list ("input prompt").
|
|
|
|
Empty by default.
|
2013-01-09 19:30:44 +04:00
|
|
|
delay
|
|
|
|
If this is set to a non-zero value, the autocompleter does no more than
|
|
|
|
1 request in each delay milliseconds.
|
2013-01-17 22:59:14 +04:00
|
|
|
moreMarker
|
|
|
|
The server supplying hint options usually limits their count.
|
|
|
|
But it's not always convenient having to type additional characters for
|
|
|
|
narrowing down the selection. Optionally you can supply additional item
|
|
|
|
with special value '#MORE' (or 'moreMarker' option value if it is there)
|
|
|
|
at the end of the list, and when it will be clicked, SimpleAutocomplete
|
|
|
|
will issue another request to dataLoader with incremented 'more' parameter.
|
|
|
|
You can also set moreMarker to false to disable this feature.
|
2011-11-08 18:14:01 +04:00
|
|
|
*/
|
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// *** Constructor ***
|
|
|
|
|
2013-01-09 19:30:44 +04:00
|
|
|
var SimpleAutocomplete = function(input, dataLoader, params)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
|
|
|
if (typeof(input) == 'string')
|
|
|
|
input = document.getElementById(input);
|
2013-01-09 19:30:44 +04:00
|
|
|
if (!params)
|
|
|
|
params = {};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
|
|
|
// Parameters
|
2012-10-13 18:29:46 +04:00
|
|
|
this.input = input;
|
|
|
|
this.dataLoader = dataLoader;
|
2013-01-09 19:30:44 +04:00
|
|
|
this.multipleDelimiter = params.multipleDelimiter;
|
|
|
|
this.onChangeListener = params.onChangeListener;
|
|
|
|
this.maxHeight = params.maxHeight;
|
|
|
|
this.emptyText = params.emptyText;
|
|
|
|
this.allowHTML = params.allowHTML;
|
2013-03-05 19:39:26 +04:00
|
|
|
this.promptHTML = params.promptHTML || '';
|
2013-01-09 19:30:44 +04:00
|
|
|
this.delay = params.delay;
|
2013-01-17 22:59:14 +04:00
|
|
|
this.moreMarker = params.moreMarker;
|
|
|
|
|
|
|
|
// Default values
|
|
|
|
if (this.moreMarker === undefined)
|
|
|
|
this.moreMarker = '#MORE';
|
2013-01-09 19:30:44 +04:00
|
|
|
if (this.delay === undefined)
|
|
|
|
this.delay = 300;
|
2013-01-09 19:32:58 +04:00
|
|
|
if (this.emptyText === undefined)
|
|
|
|
this.emptyText = 'No items found';
|
2011-11-08 18:14:01 +04:00
|
|
|
|
|
|
|
// Variables
|
2013-03-05 19:31:23 +04:00
|
|
|
this.origAutocomplete = input.autocomplete;
|
2013-01-17 22:59:14 +04:00
|
|
|
this.isMoreClick = false;
|
|
|
|
this.more = 0;
|
2013-01-09 19:30:44 +04:00
|
|
|
this.timer = null;
|
2012-10-14 02:15:54 +04:00
|
|
|
this.closure = [];
|
2012-10-13 18:29:46 +04:00
|
|
|
this.items = [];
|
|
|
|
this.skipHideCounter = 0;
|
|
|
|
this.selectedIndex = -1;
|
|
|
|
this.disabled = false;
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// *** Call initialise ***
|
|
|
|
this.init();
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// *** Instance methods ***
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Initialiser
|
|
|
|
SimpleAutocomplete.prototype.init = function()
|
|
|
|
{
|
|
|
|
var e = this.input;
|
2013-01-17 22:59:14 +04:00
|
|
|
var l = SimpleAutocomplete.SimpleAutocompletes;
|
|
|
|
this.id = this.input.id + l.length;
|
|
|
|
l.push(this);
|
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
var p = getOffset(e);
|
|
|
|
|
|
|
|
// Create hint layer
|
|
|
|
var t = this.hintLayer = document.createElement('div');
|
|
|
|
t.className = 'hintLayer';
|
|
|
|
t.style.display = 'none';
|
|
|
|
t.style.position = 'absolute';
|
|
|
|
t.style.top = (p.top+e.offsetHeight) + 'px';
|
|
|
|
t.style.zIndex = 1000;
|
|
|
|
t.style.left = p.left + 'px';
|
|
|
|
if (this.maxHeight)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
t.style.overflowY = 'scroll';
|
|
|
|
try { t.style.overflow = '-moz-scrollbars-vertical'; } catch(exc) {}
|
|
|
|
t.style.maxHeight = this.maxHeight+'px';
|
|
|
|
if (!t.style.maxHeight)
|
|
|
|
this.scriptMaxHeight = true;
|
|
|
|
}
|
|
|
|
document.body.appendChild(t);
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Remember instance
|
2012-10-14 03:40:47 +04:00
|
|
|
e.SimpleAutocomplete_input = this;
|
|
|
|
t.SimpleAutocomplete_layer = this;
|
2012-10-13 18:29:46 +04:00
|
|
|
|
|
|
|
// Set event listeners
|
|
|
|
var self = this;
|
|
|
|
var ie_opera = navigator.userAgent.match('MSIE') || navigator.userAgent.match('Opera');
|
|
|
|
if (ie_opera)
|
2012-10-14 02:15:54 +04:00
|
|
|
this.addRmListener('keydown', function(ev) { return self.onKeyPress(ev); });
|
2012-10-13 18:29:46 +04:00
|
|
|
else
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-14 02:15:54 +04:00
|
|
|
this.addRmListener('keydown', function(ev) { return self.onKeyDown(ev); });
|
|
|
|
this.addRmListener('keypress', function(ev) { return self.onKeyPress(ev); });
|
2012-10-13 18:29:46 +04:00
|
|
|
}
|
2012-10-14 02:15:54 +04:00
|
|
|
this.addRmListener('keyup', function(ev) { return self.onKeyUp(ev); });
|
|
|
|
this.addRmListener('change', function() { return self.onChange(); });
|
|
|
|
this.addRmListener('focus', function() { return self.onInputFocus(); });
|
|
|
|
this.addRmListener('blur', function() { return self.onInputBlur(); });
|
2012-10-14 03:40:47 +04:00
|
|
|
addListener(t, 'mousedown', function(ev) { return self.cancelBubbleOnHint(ev); });
|
2012-10-13 18:29:46 +04:00
|
|
|
this.onChange();
|
|
|
|
};
|
|
|
|
|
|
|
|
// obj = [ [ name, value, disabled ], [ name, value ], ... ]
|
2013-01-17 22:59:14 +04:00
|
|
|
SimpleAutocomplete.prototype.replaceItems = function(items, keepPosition)
|
2012-10-13 18:29:46 +04:00
|
|
|
{
|
2013-03-05 19:39:26 +04:00
|
|
|
this.hintLayer.innerHTML = this.promptHTML;
|
2013-01-17 22:59:14 +04:00
|
|
|
if (!keepPosition)
|
|
|
|
{
|
|
|
|
this.hintLayer.scrollTop = 0;
|
|
|
|
}
|
2012-10-13 18:29:46 +04:00
|
|
|
this.items = [];
|
|
|
|
if (!items || items.length == 0)
|
|
|
|
{
|
|
|
|
if (this.emptyText)
|
2011-11-09 20:51:07 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
var d = document.createElement('div');
|
|
|
|
d.className = 'hintEmptyText';
|
|
|
|
d.innerHTML = this.emptyText;
|
|
|
|
this.hintLayer.appendChild(d);
|
2011-11-09 20:51:07 +04:00
|
|
|
}
|
2012-10-13 18:29:46 +04:00
|
|
|
else
|
|
|
|
this.disable();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.enable();
|
|
|
|
var h = {};
|
|
|
|
if (this.multipleDelimiter)
|
2011-11-09 20:51:07 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
var old = this.input.value.split(this.multipleDelimiter);
|
|
|
|
for (var i = 0; i < old.length; i++)
|
|
|
|
h[old[i].trim()] = true;
|
|
|
|
}
|
|
|
|
for (var i in items)
|
|
|
|
this.hintLayer.appendChild(this.makeItem(items[i][0], items[i][1], h[items[i][1]]));
|
|
|
|
if (this.maxHeight)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
this.hintLayer.style.height =
|
|
|
|
(this.hintLayer.scrollHeight > this.maxHeight
|
|
|
|
? this.maxHeight : this.hintLayer.scrollHeight) + 'px';
|
|
|
|
}
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-14 02:15:54 +04:00
|
|
|
// Add removable listener (remember the function)
|
|
|
|
SimpleAutocomplete.prototype.addRmListener = function(n, f)
|
|
|
|
{
|
|
|
|
this.closure[n] = f;
|
|
|
|
addListener(this.input, n, f);
|
|
|
|
};
|
|
|
|
|
|
|
|
// Remove instance ("destructor")
|
|
|
|
SimpleAutocomplete.prototype.remove = function()
|
|
|
|
{
|
|
|
|
if (!this.hintLayer)
|
|
|
|
return;
|
|
|
|
this.hintLayer.parentNode.removeChild(this.hintLayer);
|
|
|
|
for (var i in this.closure)
|
|
|
|
{
|
|
|
|
removeListener(this.input, i, this.closure[i]);
|
|
|
|
}
|
|
|
|
for (var i = 0; i < SimpleAutocomplete.SimpleAutocompletes.length; i++)
|
|
|
|
{
|
|
|
|
if (SimpleAutocomplete.SimpleAutocompletes[i] == this)
|
|
|
|
{
|
|
|
|
SimpleAutocomplete.SimpleAutocompletes.splice(i, 1);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.closure = {};
|
|
|
|
this.input = null;
|
|
|
|
this.hintLayer = null;
|
|
|
|
this.items = null;
|
|
|
|
};
|
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Create a drop-down list item, include checkbox if this.multipleDelimiter is true
|
|
|
|
SimpleAutocomplete.prototype.makeItem = function(name, value, checked)
|
|
|
|
{
|
|
|
|
var d = document.createElement('div');
|
|
|
|
d.id = this.id+'_item_'+this.items.length;
|
|
|
|
d.className = 'hintItem';
|
|
|
|
d.title = value;
|
|
|
|
if (this.allowHTML)
|
|
|
|
d.innerHTML = name;
|
2013-01-17 22:59:14 +04:00
|
|
|
else
|
|
|
|
d.appendChild(document.createTextNode(name));
|
2012-10-13 18:29:46 +04:00
|
|
|
if (this.multipleDelimiter)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
var c = document.createElement('input');
|
|
|
|
c.type = 'checkbox';
|
|
|
|
c.id = this.id+'_check_'+this.items.length;
|
|
|
|
c.checked = checked && true;
|
|
|
|
c.value = value;
|
|
|
|
if (d.childNodes.length)
|
|
|
|
d.insertBefore(c, d.firstChild);
|
|
|
|
else
|
|
|
|
d.appendChild(c);
|
|
|
|
addListener(c, 'click', this.preventCheck);
|
|
|
|
}
|
|
|
|
var self = this;
|
|
|
|
addListener(d, 'mouseover', function() { return self.onItemMouseOver(this); });
|
2012-10-14 01:48:31 +04:00
|
|
|
addListener(d, 'mousedown', function(ev) { return self.onItemClick(ev, this); });
|
2012-10-13 18:29:46 +04:00
|
|
|
this.items.push([name, value, checked]);
|
|
|
|
return d;
|
|
|
|
};
|
|
|
|
|
|
|
|
// Move highlight forward or back by 'by' items (integer)
|
|
|
|
SimpleAutocomplete.prototype.moveHighlight = function(by)
|
|
|
|
{
|
|
|
|
var n = this.selectedIndex+by;
|
|
|
|
if (n < 0)
|
|
|
|
n = 0;
|
|
|
|
var elem = document.getElementById(this.id+'_item_'+n);
|
|
|
|
if (!elem)
|
2011-11-08 18:14:01 +04:00
|
|
|
return true;
|
2012-10-13 18:29:46 +04:00
|
|
|
return this.highlightItem(elem);
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Make item 'elem' active (highlighted)
|
|
|
|
SimpleAutocomplete.prototype.highlightItem = function(elem)
|
|
|
|
{
|
|
|
|
if (this.selectedIndex >= 0)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
var c = this.getItem();
|
|
|
|
if (c)
|
|
|
|
c.className = 'hintItem';
|
|
|
|
}
|
|
|
|
this.selectedIndex = parseInt(elem.id.substr(this.id.length+6));
|
|
|
|
elem.className = 'hintActiveItem';
|
|
|
|
return false;
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Get index'th item, or current when index is null
|
|
|
|
SimpleAutocomplete.prototype.getItem = function(index)
|
|
|
|
{
|
|
|
|
if (index == null)
|
|
|
|
index = this.selectedIndex;
|
|
|
|
if (index < 0)
|
|
|
|
return null;
|
|
|
|
return document.getElementById(this.id+'_item_'+this.selectedIndex);
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Select index'th item - change the input value and hide the hint if not a multi-select
|
|
|
|
SimpleAutocomplete.prototype.selectItem = function(index)
|
|
|
|
{
|
|
|
|
if (!this.multipleDelimiter)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
this.input.value = this.items[index][1];
|
|
|
|
this.hide();
|
|
|
|
}
|
|
|
|
else
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
document.getElementById(this.id+'_check_'+index).checked = this.items[index][2] = !this.items[index][2];
|
|
|
|
var old = this.input.value.split(this.multipleDelimiter);
|
|
|
|
for (var i = 0; i < old.length; i++)
|
|
|
|
old[i] = old[i].trim();
|
2013-01-17 22:59:14 +04:00
|
|
|
// Turn the clicked item on or off, preserving order
|
2012-10-13 18:29:46 +04:00
|
|
|
if (!this.items[index][2])
|
2011-11-09 20:51:07 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
for (var i = old.length-1; i >= 0; i--)
|
|
|
|
if (old[i] == this.items[index][1])
|
|
|
|
old.splice(i, 1);
|
|
|
|
this.input.value = old.join(this.multipleDelimiter+' ');
|
2011-11-09 20:51:07 +04:00
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
var h = {};
|
|
|
|
for (var i = 0; i < this.items.length; i++)
|
|
|
|
if (this.items[i][2])
|
|
|
|
h[this.items[i][1]] = true;
|
|
|
|
var nl = [];
|
2011-11-09 20:51:07 +04:00
|
|
|
for (var i = 0; i < old.length; i++)
|
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
if (h[old[i]])
|
2011-11-09 20:51:07 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
delete h[old[i]];
|
|
|
|
nl.push(old[i]);
|
2011-11-09 20:51:07 +04:00
|
|
|
}
|
|
|
|
}
|
2012-10-13 18:29:46 +04:00
|
|
|
for (var i = 0; i < this.items.length; i++)
|
|
|
|
if (this.items[i][2] && h[this.items[i][1]])
|
|
|
|
nl.push(this.items[i][1]);
|
|
|
|
this.input.value = nl.join(this.multipleDelimiter+' ');
|
2011-11-09 20:51:07 +04:00
|
|
|
}
|
2012-10-13 18:29:46 +04:00
|
|
|
}
|
|
|
|
this.curValue = this.input.value;
|
|
|
|
if (this.onChangeListener)
|
2012-10-14 03:40:47 +04:00
|
|
|
this.onChangeListener(this, index);
|
2012-10-13 18:29:46 +04:00
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Hide hinter
|
|
|
|
SimpleAutocomplete.prototype.hide = function()
|
|
|
|
{
|
|
|
|
if (!this.skipHideCounter)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
this.hintLayer.style.display = 'none';
|
2013-03-05 19:31:23 +04:00
|
|
|
this.input.autocomplete = this.origAutocomplete;
|
2012-10-13 18:29:46 +04:00
|
|
|
}
|
|
|
|
else
|
|
|
|
this.skipHideCounter = 0;
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Show hinter
|
|
|
|
SimpleAutocomplete.prototype.show = function()
|
|
|
|
{
|
|
|
|
if (!this.disabled)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
var p = getOffset(this.input);
|
|
|
|
this.hintLayer.style.top = (p.top+this.input.offsetHeight) + 'px';
|
|
|
|
this.hintLayer.style.left = p.left + 'px';
|
|
|
|
this.hintLayer.style.display = '';
|
|
|
|
this.input.autocomplete = 'off';
|
|
|
|
}
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Disable hinter, for the case when there is no items and no empty text
|
|
|
|
SimpleAutocomplete.prototype.disable = function()
|
|
|
|
{
|
|
|
|
this.disabled = true;
|
|
|
|
this.hide();
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Enable hinter
|
|
|
|
SimpleAutocomplete.prototype.enable = function()
|
|
|
|
{
|
|
|
|
var show = this.disabled;
|
|
|
|
this.disabled = false;
|
|
|
|
if (show)
|
|
|
|
this.show();
|
|
|
|
}
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// *** Event handlers ***
|
|
|
|
|
|
|
|
// Prevent default action on checkbox
|
|
|
|
SimpleAutocomplete.prototype.preventCheck = function(ev)
|
|
|
|
{
|
|
|
|
ev = ev||window.event;
|
|
|
|
return stopEvent(ev, false, true);
|
|
|
|
};
|
|
|
|
|
2012-10-14 03:40:47 +04:00
|
|
|
// Cancel event propagation
|
|
|
|
SimpleAutocomplete.prototype.cancelBubbleOnHint = function(ev)
|
|
|
|
{
|
|
|
|
ev = ev||window.event;
|
|
|
|
if (this.hasFocus)
|
|
|
|
this.skipHideCounter++;
|
|
|
|
return stopEvent(ev, true, false);
|
|
|
|
};
|
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Handle item mouse over
|
|
|
|
SimpleAutocomplete.prototype.onItemMouseOver = function(elm)
|
|
|
|
{
|
|
|
|
return this.highlightItem(elm);
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Handle item clicks
|
2012-10-14 01:48:31 +04:00
|
|
|
SimpleAutocomplete.prototype.onItemClick = function(ev, elm)
|
2012-10-13 18:29:46 +04:00
|
|
|
{
|
2013-01-17 22:59:14 +04:00
|
|
|
var index = parseInt(elm.id.substr(this.id.length+6));
|
|
|
|
if (this.moreMarker && this.items[index][1] == this.moreMarker)
|
|
|
|
{
|
|
|
|
// User clicked 'more'. Load more items without delay.
|
|
|
|
this.isMoreClick = true;
|
|
|
|
this.more++;
|
|
|
|
this.onChange();
|
|
|
|
this.isMoreClick = false;
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
this.selectItem(index);
|
2012-10-13 18:29:46 +04:00
|
|
|
return true;
|
|
|
|
};
|
|
|
|
|
|
|
|
// Handle user input, load new items
|
|
|
|
SimpleAutocomplete.prototype.onChange = function()
|
|
|
|
{
|
|
|
|
var v = this.input.value.trim();
|
2013-01-17 22:59:14 +04:00
|
|
|
if (!this.isMoreClick)
|
|
|
|
{
|
|
|
|
this.more = 0;
|
|
|
|
}
|
|
|
|
if (v != this.curValue || this.isMoreClick)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
this.curValue = v;
|
2013-01-17 22:59:14 +04:00
|
|
|
if (!this.delay || this.isMoreClick)
|
|
|
|
this.dataLoader(this, v, this.more);
|
2013-01-09 19:30:44 +04:00
|
|
|
else if (!this.timer)
|
|
|
|
{
|
|
|
|
var self = this;
|
|
|
|
this.timer = setTimeout(function() {
|
2013-01-17 22:59:14 +04:00
|
|
|
self.dataLoader(self, self.curValue, self.more);
|
2013-01-09 19:30:44 +04:00
|
|
|
self.timer = null;
|
|
|
|
}, this.delay);
|
|
|
|
}
|
2012-10-13 18:29:46 +04:00
|
|
|
}
|
|
|
|
return true;
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Handle Enter key presses, cancel handling of arrow keys
|
|
|
|
SimpleAutocomplete.prototype.onKeyUp = function(ev)
|
|
|
|
{
|
|
|
|
ev = ev||window.event;
|
2012-10-14 02:27:40 +04:00
|
|
|
if (ev.keyCode == 38 || ev.keyCode == 40)
|
2012-10-13 18:29:46 +04:00
|
|
|
this.show();
|
|
|
|
if (ev.keyCode == 38 || ev.keyCode == 40 || ev.keyCode == 10 || ev.keyCode == 13)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
if (this.hintLayer.style.display == '')
|
|
|
|
return stopEvent(ev, true, true);
|
2011-11-08 18:14:01 +04:00
|
|
|
else
|
2012-10-13 18:29:46 +04:00
|
|
|
return true;
|
|
|
|
}
|
|
|
|
this.onChange();
|
|
|
|
return true;
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Cancel handling of Enter key
|
|
|
|
SimpleAutocomplete.prototype.onKeyDown = function(ev)
|
|
|
|
{
|
|
|
|
ev = ev||window.event;
|
|
|
|
if (ev.keyCode == 10 || ev.keyCode == 13)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
if (this.hintLayer.style.display == '')
|
|
|
|
return stopEvent(ev, true, true);
|
|
|
|
else
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Handle arrow keys and Enter
|
|
|
|
SimpleAutocomplete.prototype.onKeyPress = function(ev)
|
|
|
|
{
|
|
|
|
if (this.hintLayer.style.display == 'none')
|
|
|
|
return true;
|
|
|
|
ev = ev||window.event;
|
|
|
|
if (ev.keyCode == 38) // up
|
|
|
|
this.moveHighlight(-1);
|
|
|
|
else if (ev.keyCode == 40) // down
|
|
|
|
this.moveHighlight(1);
|
|
|
|
else if (ev.keyCode == 10 || ev.keyCode == 13) // enter
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
if (this.selectedIndex >= 0)
|
|
|
|
this.selectItem(this.selectedIndex);
|
|
|
|
return stopEvent(ev, true, true);
|
|
|
|
}
|
2012-10-14 02:27:40 +04:00
|
|
|
else if (ev.keyCode == 27) // escape
|
|
|
|
{
|
|
|
|
this.hide();
|
|
|
|
return stopEvent(ev, true, true);
|
|
|
|
}
|
2012-10-13 18:29:46 +04:00
|
|
|
else
|
|
|
|
return true;
|
|
|
|
// scrolling
|
|
|
|
if (this.selectedIndex >= 0)
|
2011-11-08 18:14:01 +04:00
|
|
|
{
|
2012-10-13 18:29:46 +04:00
|
|
|
var c = this.getItem();
|
|
|
|
var t = this.hintLayer;
|
|
|
|
var ct = getOffset(c).top + t.scrollTop - t.style.top.substr(0, t.style.top.length-2);
|
|
|
|
var ch = c.scrollHeight;
|
|
|
|
if (ct+ch-t.offsetHeight > t.scrollTop)
|
|
|
|
t.scrollTop = ct+ch-t.offsetHeight;
|
|
|
|
else if (ct < t.scrollTop)
|
|
|
|
t.scrollTop = ct;
|
2011-11-08 18:14:01 +04:00
|
|
|
}
|
2012-10-13 18:29:46 +04:00
|
|
|
return stopEvent(ev, true, true);
|
|
|
|
};
|
2011-11-08 18:14:01 +04:00
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Called when input receives focus
|
|
|
|
SimpleAutocomplete.prototype.onInputFocus = function()
|
|
|
|
{
|
2012-10-14 02:27:40 +04:00
|
|
|
if (this.disabledUntil)
|
|
|
|
this.enable();
|
2012-10-13 18:29:46 +04:00
|
|
|
this.show();
|
|
|
|
this.input.autocomplete = 'off';
|
|
|
|
this.hasFocus = true;
|
|
|
|
return true;
|
2011-11-08 18:14:01 +04:00
|
|
|
};
|
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// Called when input loses focus
|
|
|
|
SimpleAutocomplete.prototype.onInputBlur = function()
|
|
|
|
{
|
|
|
|
this.hide();
|
2013-03-05 19:31:23 +04:00
|
|
|
this.input.autocomplete = this.origAutocomplete;
|
2012-10-13 18:29:46 +04:00
|
|
|
this.hasFocus = false;
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
|
|
|
|
// *** Global variables ***
|
|
|
|
|
|
|
|
// List of all instances
|
2011-11-08 18:14:01 +04:00
|
|
|
SimpleAutocomplete.SimpleAutocompletes = [];
|
|
|
|
|
|
|
|
// Global mousedown handler, hides dropdowns when clicked outside
|
|
|
|
SimpleAutocomplete.GlobalMouseDown = function(ev)
|
|
|
|
{
|
|
|
|
var target = ev.target || ev.srcElement;
|
|
|
|
var esh;
|
|
|
|
while (target)
|
|
|
|
{
|
|
|
|
esh = target.SimpleAutocomplete_input;
|
|
|
|
if (esh)
|
|
|
|
break;
|
|
|
|
else if (target.SimpleAutocomplete_layer)
|
|
|
|
return true;
|
|
|
|
target = target.parentNode;
|
|
|
|
}
|
|
|
|
for (var i in SimpleAutocomplete.SimpleAutocompletes)
|
|
|
|
if (SimpleAutocomplete.SimpleAutocompletes[i] != esh)
|
|
|
|
SimpleAutocomplete.SimpleAutocompletes[i].hide();
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// *** UTILITY FUNCTIONS ***
|
2012-10-14 02:15:54 +04:00
|
|
|
// Remove this section if you already have these functions defined somewhere else
|
2011-11-09 20:51:07 +04:00
|
|
|
|
2012-10-14 02:15:54 +04:00
|
|
|
// Cross-browser add/remove event listeners
|
2011-11-08 18:14:01 +04:00
|
|
|
var addListener = function()
|
|
|
|
{
|
2012-10-14 02:15:54 +04:00
|
|
|
return window.addEventListener
|
|
|
|
? function(el, type, fn) { el.addEventListener(type, fn, false); }
|
|
|
|
: function(el, type, fn) { el.attachEvent('on'+type, fn); };
|
|
|
|
}();
|
|
|
|
|
|
|
|
var removeListener = function()
|
|
|
|
{
|
|
|
|
return window.removeEventListener
|
|
|
|
? function(el, type, fn) { el.removeEventListener(type, fn, false); }
|
|
|
|
: function(el, type, fn) { el.detachEvent('on'+type, fn); };
|
2011-11-08 18:14:01 +04:00
|
|
|
}();
|
|
|
|
|
|
|
|
// Cancel event bubbling and/or default action
|
|
|
|
var stopEvent = function(ev, cancelBubble, preventDefault)
|
|
|
|
{
|
|
|
|
if (cancelBubble)
|
|
|
|
{
|
|
|
|
if (ev.stopPropagation)
|
|
|
|
ev.stopPropagation();
|
|
|
|
else
|
|
|
|
ev.cancelBubble = true;
|
|
|
|
}
|
|
|
|
if (preventDefault && ev.preventDefault)
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.returnValue = !preventDefault;
|
|
|
|
return !preventDefault;
|
|
|
|
};
|
|
|
|
|
2011-11-09 20:51:07 +04:00
|
|
|
// Remove leading and trailing whitespace
|
2011-11-09 21:11:16 +04:00
|
|
|
if (!String.prototype.trim)
|
2011-11-09 20:51:07 +04:00
|
|
|
{
|
2011-11-09 21:11:16 +04:00
|
|
|
String.prototype.trim = function()
|
|
|
|
{
|
|
|
|
return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
|
|
|
|
};
|
|
|
|
}
|
2011-11-09 20:51:07 +04:00
|
|
|
|
|
|
|
// Get element position, relative to the top-left corner of page
|
|
|
|
var getOffset = function(elem)
|
|
|
|
{
|
|
|
|
if (elem.getBoundingClientRect)
|
|
|
|
return getOffsetRect(elem);
|
|
|
|
else
|
|
|
|
return getOffsetSum(elem);
|
|
|
|
};
|
|
|
|
|
|
|
|
// Get element position using getBoundingClientRect()
|
|
|
|
var getOffsetRect = function(elem)
|
|
|
|
{
|
|
|
|
var box = elem.getBoundingClientRect();
|
|
|
|
|
|
|
|
var body = document.body;
|
|
|
|
var docElem = document.documentElement;
|
|
|
|
|
|
|
|
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
|
|
|
|
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
|
|
|
|
var clientTop = docElem.clientTop || body.clientTop || 0;
|
|
|
|
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
|
|
|
|
var top = box.top + scrollTop - clientTop;
|
|
|
|
var left = box.left + scrollLeft - clientLeft;
|
|
|
|
|
|
|
|
return { top: Math.round(top), left: Math.round(left) };
|
|
|
|
};
|
|
|
|
|
|
|
|
// Get element position using sum of offsetTop/offsetLeft
|
|
|
|
var getOffsetSum = function(elem)
|
|
|
|
{
|
|
|
|
var top = 0, left = 0;
|
|
|
|
while(elem)
|
|
|
|
{
|
|
|
|
top = top + parseInt(elem.offsetTop);
|
|
|
|
left = left + parseInt(elem.offsetLeft);
|
|
|
|
elem = elem.offsetParent;
|
|
|
|
}
|
|
|
|
return { top: top, left: left };
|
|
|
|
};
|
|
|
|
|
2012-10-13 18:29:46 +04:00
|
|
|
// *** END UTILITY FUNCTIONS ***
|
2011-11-09 20:51:07 +04:00
|
|
|
|
2011-11-08 18:14:01 +04:00
|
|
|
// Set global mousedown listener
|
|
|
|
addListener(window, 'load', function() { addListener(document, 'mousedown', SimpleAutocomplete.GlobalMouseDown) });
|