allowHTML option

master
Vitaliy Filippov 2012-01-11 15:45:21 +00:00
parent 08397d94da
commit e3e4240f1c
1 changed files with 16 additions and 4 deletions

View File

@ -3,7 +3,7 @@
(c) Vitaliy Filippov 2011 (c) Vitaliy Filippov 2011
Usage: Usage:
Include hinter.css, hinter.js on your page. Then write: Include hinter.css, hinter.js on your page. Then write:
var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText); var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText, allowHTML);
Parameters: Parameters:
input input
The input, either id or DOM element reference (the input must have an id anyway). The input, either id or DOM element reference (the input must have an id anyway).
@ -29,9 +29,11 @@
emptyText emptyText
Text to show when dataLoader returns no options. Text to show when dataLoader returns no options.
If emptyText === false, the hint will be hidden instead of showing text. If emptyText === false, the hint will be hidden instead of showing text.
allowHTML
If true, HTML code will be allowed in option names.
*/ */
var SimpleAutocomplete = function(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText) var SimpleAutocomplete = function(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText, allowHTML)
{ {
if (typeof(input) == 'string') if (typeof(input) == 'string')
input = document.getElementById(input); input = document.getElementById(input);
@ -46,6 +48,7 @@ var SimpleAutocomplete = function(input, dataLoader, multipleDelimiter, onChange
self.onChangeListener = onChangeListener; self.onChangeListener = onChangeListener;
self.maxHeight = maxHeight; self.maxHeight = maxHeight;
self.emptyText = emptyText; self.emptyText = emptyText;
self.allowHTML = allowHTML;
// Variables // Variables
self.items = []; self.items = [];
@ -143,6 +146,8 @@ var SimpleAutocomplete = function(input, dataLoader, multipleDelimiter, onChange
d.id = self.id+'_item_'+self.items.length; d.id = self.id+'_item_'+self.items.length;
d.className = 'hintItem'; d.className = 'hintItem';
d.title = value; d.title = value;
if (self.allowHTML)
d.innerHTML = name;
if (self.multipleDelimiter) if (self.multipleDelimiter)
{ {
var c = document.createElement('input'); var c = document.createElement('input');
@ -150,10 +155,14 @@ var SimpleAutocomplete = function(input, dataLoader, multipleDelimiter, onChange
c.id = self.id+'_check_'+self.items.length; c.id = self.id+'_check_'+self.items.length;
c.checked = checked && true; c.checked = checked && true;
c.value = value; c.value = value;
d.appendChild(c); if (d.children.length)
d.insertBefore(c, d.firstChild);
else
d.appendChild(c);
addListener(c, 'click', self.preventCheck); addListener(c, 'click', self.preventCheck);
} }
d.appendChild(document.createTextNode(name)); if (!self.allowHTML)
d.appendChild(document.createTextNode(name));
addListener(d, 'mouseover', self.onItemMouseOver); addListener(d, 'mouseover', self.onItemMouseOver);
addListener(d, 'mousedown', self.onItemClick); addListener(d, 'mousedown', self.onItemClick);
self.items.push([name, value, checked]); self.items.push([name, value, checked]);
@ -354,6 +363,9 @@ var SimpleAutocomplete = function(input, dataLoader, multipleDelimiter, onChange
// Show hinter // Show hinter
self.show = function() self.show = function()
{ {
var p = getOffset(self.input);
self.hintLayer.style.top = (p.top+self.input.offsetHeight) + 'px';
self.hintLayer.style.left = p.left + 'px';
if (!self.disabled) if (!self.disabled)
self.hintLayer.style.display = ''; self.hintLayer.style.display = '';
}; };