Autocomplete icons

HTML/termkit.css

@@ -71,6 +71,7 @@ body {
 
 .termkitOutputView .widgetFile .name, .termkitOutputView .widgetFile .meta {
   padding-left: 42px;
+  background: #000;
 }
 
 .termkitOutputView .widgetFile .name {
@@ -278,7 +279,7 @@ body {
 }
 
 .termkitTokenField span.autocomplete .line span.prefix {
-  opacity: 0.5;
+  color: rgba(207, 207, 207, .65);
 }
 
 .termkitTokenField span.autocomplete .line:nth-child(2n) {
@@ -314,6 +315,33 @@ body {
   background: #678 -webkit-gradient(linear, left top, left bottom, from(#678), to(#456));
 }
 
+.termkitTokenField span.autocomplete .line.match-command .prefix {
+  padding-left: 20px;
+  background: url(../Images/command.png) no-repeat 0 50%;
+}
+.termkitTokenField span.autocomplete .line.match-file .prefix {
+  padding-left: 20px;
+  background: url(../Images/file.png) no-repeat 0 50%;
+}
+.termkitTokenField span.autocomplete .line.match-folder .prefix {
+  padding-left: 20px;
+  background: url(../Images/folder.png) no-repeat 0 50%;
+}
+
+.termkitTokenField span#caret input.match-command {
+  padding-left: 20px;
+  background: url(../Images/command.png) no-repeat 0 50%;
+}
+.termkitTokenField span#caret input.match-file {
+  padding-left: 20px;
+  background: url(../Images/file.png) no-repeat 0 50%;
+}
+.termkitTokenField span#caret input.match-folder {
+  padding-left: 20px;
+  background: url(../Images/folder.png) no-repeat 0 50%;
+}
+
+
 /************/
 
 .termkitTokenField > span.token {

HTML/tokenfield/autocomplete.js

@@ -58,6 +58,7 @@ tf.autocomplete.prototype = {
     // Reset caret position.
     //this.caret.$element.find('input').css('marginTop', 0);
     this.$element.css('marginTop', 0);
+    this.caret && this.caret.$input.removeClass()
   },
 
   onBlur: function (element) {
@@ -100,13 +101,16 @@ tf.autocomplete.prototype = {
             queue: false,
           });
         that.animateTarget = offsetY;
+
+        // Style caret to match line.
+        that.caret && that.caret.$input.removeClass().addClass('match-' + that.items[that.selected].type);
       }
       else {
         $e.empty().hide();
       }
 
       // Don't show single item popup.
-      if (that.items.length == 1 && that.items[0] == prefix) {
+      if (that.items.length == 1 && that.items[0].label == prefix) {
         that.remove();
       }
     }