diff --git a/js/redactor-plugins.js b/js/redactor-plugins.js
index 19544786bd19428b9250ec5f3d20907a019eef97..33edff821410ffa9c3dd136beed65170e145a0b5 100644
--- a/js/redactor-plugins.js
+++ b/js/redactor-plugins.js
@@ -1803,11 +1803,13 @@ RedactorPlugins.contexttypeahead = function() {
       }
     },
 
-    select: function(item) {
+    select: function(item, event) {
       var current = this.selection.getCurrent(),
           sel     = this.selection.get(),
           range   = this.sel.getRangeAt(0),
           cursorAt = range.endOffset,
+          // TODO: Consume immediately following `}` symbols
+          plugin  = this.contexttypeahead,
           search  = new RegExp(/%\{([^}]*)(\}?)$/);
 
       // FIXME: ENTER will end up here, but current will be empty
@@ -1818,7 +1820,9 @@ RedactorPlugins.contexttypeahead = function() {
       // Set cursor at the end of the expanded text
       var left = current.textContent.substring(0, cursorAt),
           right = current.textContent.substring(cursorAt),
-          newLeft = left.replace(search, '%{' + item.variable + '}');
+          autoExpand = event.target.nodeName == 'I',
+          selected = item.variable + (autoExpand ? '.' : '')
+          newLeft = left.replace(search, '%{' + selected + '}');
 
       current.textContent = newLeft
         // Drop the remaining part of a variable block, if any
@@ -1827,7 +1831,12 @@ RedactorPlugins.contexttypeahead = function() {
       this.range.setStart(current, newLeft.length - 1);
       this.range.setEnd(current, newLeft.length - 1);
       this.selection.addRange();
-      return this.contexttypeahead.destroy();
+      if (!autoExpand)
+          return plugin.destroy();
+
+      plugin.typeahead.val(selected);
+      plugin.typeahead.typeahead('lookup');
+      return false;
     }
   };
 };
diff --git a/scp/js/bootstrap-typeahead.js b/scp/js/bootstrap-typeahead.js
index 6c8238ad132a24178d565420083d6ccd0cd27cff..7ddc01f61c56312e657d858e286c0b3c5a03401a 100644
--- a/scp/js/bootstrap-typeahead.js
+++ b/scp/js/bootstrap-typeahead.js
@@ -41,7 +41,7 @@
 
     constructor: Typeahead
 
-  , select: function () {
+  , select: function (e) {
       var val = JSON.parse(this.$menu.find('.active').attr('data-value'))
         , text
 
@@ -51,7 +51,8 @@
       this.$element.val(text)
 
       if (typeof this.onselect == "function")
-          this.onselect(val)
+          if (false === this.onselect(val, e))
+              return;
 
       return this.hide()
     }
@@ -252,7 +253,7 @@
         case 9: // tab
         case 13: // enter
           if (!this.shown) return
-          this.select()
+          this.select(e)
           break
 
         case 27: // escape
@@ -298,7 +299,7 @@
   , click: function (e) {
       e.stopPropagation()
       e.preventDefault()
-      this.select()
+      this.select(e)
     }
 
   , mouseenter: function (e) {