From e3e4240f1c84c1b0d18ae2d625903315b33143af Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Wed, 11 Jan 2012 15:45:21 +0000
Subject: [PATCH] allowHTML option

---
 hinter.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/hinter.js b/hinter.js
index a15e54a..c77f866 100644
--- a/hinter.js
+++ b/hinter.js
@@ -3,7 +3,7 @@
    (c) Vitaliy Filippov 2011
    Usage:
      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:
      input
        The input, either id or DOM element reference (the input must have an id anyway).
@@ -29,9 +29,11 @@
      emptyText
        Text to show when dataLoader returns no options.
        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')
         input = document.getElementById(input);
@@ -46,6 +48,7 @@ var SimpleAutocomplete = function(input, dataLoader, multipleDelimiter, onChange
     self.onChangeListener = onChangeListener;
     self.maxHeight = maxHeight;
     self.emptyText = emptyText;
+    self.allowHTML = allowHTML;
 
     // Variables
     self.items = [];
@@ -143,6 +146,8 @@ var SimpleAutocomplete = function(input, dataLoader, multipleDelimiter, onChange
         d.id = self.id+'_item_'+self.items.length;
         d.className = 'hintItem';
         d.title = value;
+        if (self.allowHTML)
+            d.innerHTML = name;
         if (self.multipleDelimiter)
         {
             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.checked = checked && true;
             c.value = value;
-            d.appendChild(c);
+            if (d.children.length)
+                d.insertBefore(c, d.firstChild);
+            else
+                d.appendChild(c);
             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, 'mousedown', self.onItemClick);
         self.items.push([name, value, checked]);
@@ -354,6 +363,9 @@ var SimpleAutocomplete = function(input, dataLoader, multipleDelimiter, onChange
     // Show hinter
     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)
             self.hintLayer.style.display = '';
     };