diff --git a/public/js/spec/menuSpec.js b/public/js/spec/menuSpec.js
index 76da135..fef6027 100644
--- a/public/js/spec/menuSpec.js
+++ b/public/js/spec/menuSpec.js
@@ -26,7 +26,7 @@
   create : function (params) {
     return Object.create(KorAP.Menu)
       .upgradeTo(KorAP.OwnMenu)
-      ._init(KorAP.OwnMenuItem, params);
+      ._init(KorAP.OwnMenuItem, undefined, params);
   }
 };
 
@@ -99,7 +99,7 @@
   create : function (context, params) {
     var obj = Object.create(KorAP.Menu)
       .upgradeTo(KorAP.HintMenu)
-      ._init(KorAP.HintMenuItem, params);
+      ._init(KorAP.HintMenuItem, undefined, params);
     obj._context = context;
     return obj;
   }
@@ -320,6 +320,14 @@
     ["Syntax", "syn="]
   ];
 
+  var demolist = [
+    ['Titel', 'title'],
+    ['Untertitel', 'subTitle'],
+    ['Veröffentlichungsdatum', 'pubDate'],
+    ['Länge', 'length'],
+    ['Autor', 'author']
+  ];
+
   it('should be initializable', function () {
     var list = [
       ["Constituency"],
@@ -362,61 +370,62 @@
     menu.limit(3);
 
     expect(menu.show()).toBe(true);
-    expect(menu.element().firstChild.innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
 
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
-    expect(menu.element().childNodes[1].getAttribute("data-action")).toEqual("l=");
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
+    expect(menu.element().childNodes[2].getAttribute("data-action")).toEqual("l=");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Check boundaries
-    expect(menu.element().childNodes[0].classList.contains("no-more")).toBe(true);
-    expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(false);
+    expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(true);
     expect(menu.element().childNodes[2].classList.contains("no-more")).toBe(false);
+    expect(menu.element().childNodes[3].classList.contains("no-more")).toBe(false);
   });
 
   it('should be filterable', function () {
     var menu = KorAP.HintMenu.create("cnx/", list);
     menu.limit(3);
-
-    expect(menu.show("o")).toBe(true);
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.prefix("o").show()).toBe(true);
+    expect(menu.element().childNodes[0].innerHTML).toEqual("o");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Check boundaries
-    expect(menu.element().childNodes[0].classList.contains("no-more")).toBe(true);
-    expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(false);
-    expect(menu.element().childNodes[2].classList.contains("no-more")).toBe(true);
+    expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(true);
+    expect(menu.element().childNodes[2].classList.contains("no-more")).toBe(false);
+    expect(menu.element().childNodes[3].classList.contains("no-more")).toBe(true);
 
     menu.limit(2);
 
-    expect(menu.show("o")).toBe(true);
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
-    expect(menu.element().childNodes[2]).toBe(undefined);
+    expect(menu.prefix("o").show()).toBe(true);
+    expect(menu.element().childNodes[0].innerHTML).toEqual("o");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[3]).toBe(undefined);
 
     // Check boundaries
-    expect(menu.element().childNodes[0].classList.contains("no-more")).toBe(true);
-    expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(false);
-    expect(menu.element().childNodes[2]).toBe(undefined);
+    expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(true);
+    expect(menu.element().childNodes[2].classList.contains("no-more")).toBe(false);
+    expect(menu.element().childNodes[3]).toBe(undefined);
 
-    expect(menu.show("e")).toBe(true);
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
-    expect(menu.element().childNodes[2]).toBe(undefined);
+    expect(menu.prefix("e").show()).toBe(true);
+    expect(menu.element().childNodes[0].innerHTML).toEqual("e");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+    expect(menu.element().childNodes[3]).toBe(undefined);
 
     menu.limit(5);
-
-    expect(menu.show("a")).toBe(true);
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Ex<mark>a</mark>mple 1</span>");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemm<mark>a</mark></strong>");
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Ex<mark>a</mark>mple 2</span>");
-    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>P<mark>a</mark>rt-of-Speech</strong>");
-    expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Synt<mark>a</mark>x</strong>");
-    expect(menu.element().childNodes[5]).toBe(undefined);
-
+    expect(menu.prefix("a").show()).toBe(true);
+    expect(menu.element().childNodes[0].innerHTML).toEqual("a");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Ex<mark>a</mark>mple 1</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemm<mark>a</mark></strong>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Ex<mark>a</mark>mple 2</span>");
+    expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>P<mark>a</mark>rt-of-Speech</strong>");
+    expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Synt<mark>a</mark>x</strong>");
+    expect(menu.element().childNodes[6]).toBe(undefined);
   });
 
 
@@ -425,112 +434,109 @@
 
     // Show only 3 items
     menu.limit(3);
-
     expect(menu.show()).toBe(true);
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
     expect(menu.shownItem(0).active()).toBe(true);
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
     expect(menu.shownItem(1).active()).toBe(false);
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
     expect(menu.shownItem(2).active()).toBe(false);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate next (1)
     menu.next();
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
     expect(menu.shownItem(0).active()).toBe(false);
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
     expect(menu.shownItem(1).active()).toBe(true);
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
     expect(menu.shownItem(2).active()).toBe(false);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate next (2)
     menu.next();
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
     expect(menu.shownItem(0).active()).toBe(false);
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
     expect(menu.shownItem(1).active()).toBe(false);
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
     expect(menu.shownItem(2).active()).toBe(true);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate next (3)
     // scroll!
     menu.next();
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Lemma</strong>");
-
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
     expect(menu.shownItem(0).active()).toBe(false);
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
     expect(menu.shownItem(1).active()).toBe(false);
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
     expect(menu.shownItem(2).active()).toBe(true);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate next (4)
     menu.next();
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
     expect(menu.shownItem(0).active()).toBe(false);
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
     expect(menu.shownItem(1).active()).toBe(false);
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Syntax</strong>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Syntax</strong>");
     expect(menu.shownItem(2).active()).toBe(true);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate next (5) - ROLL
     menu.next();
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
     expect(menu.shownItem(0).active()).toBe(true);
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
     expect(menu.shownItem(1).active()).toBe(false);
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
     expect(menu.shownItem(2).active()).toBe(false);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Active next (6)
     menu.next();
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
     expect(menu.shownItem(0).active()).toBe(false);
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
     expect(menu.shownItem(1).active()).toBe(true);
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
     expect(menu.shownItem(2).active()).toBe(false);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
   });
 
   it('should be prevable', function () {
     var menu = KorAP.HintMenu.create("cnx/", list);
-
     menu.limit(3);
     expect(menu.show()).toBe(true);
 
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
     expect(menu.shownItem(0).active()).toBe(true);
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
     expect(menu.shownItem(1).active()).toBe(false);
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
     expect(menu.shownItem(2).active()).toBe(false);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate prev (1) - roll to bottom
     menu.prev();
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
     expect(menu.shownItem(0).active()).toBe(false);
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
     expect(menu.shownItem(1).active()).toBe(false);
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Syntax</strong>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Syntax</strong>");
     expect(menu.shownItem(2).active()).toBe(true);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate prev (2)
     menu.prev();
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
     expect(menu.shownItem(0).active()).toBe(false);
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
     expect(menu.shownItem(1).active()).toBe(true);
-    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Syntax</strong>");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Syntax</strong>");
     expect(menu.shownItem(2).active()).toBe(false);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate prev (3)
     menu.prev();
@@ -540,7 +546,7 @@
     expect(menu.shownItem(1).active()).toBe(false);
     expect(menu.shownItem(2).name()).toEqual("Syntax");
     expect(menu.shownItem(2).active()).toBe(false);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate prev (4)
     menu.prev();
@@ -550,7 +556,7 @@
     expect(menu.shownItem(1).active()).toBe(false);
     expect(menu.shownItem(2).name()).toEqual("Part-of-Speech");
     expect(menu.shownItem(2).active()).toBe(false);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate prev (5)
     menu.prev();
@@ -560,7 +566,7 @@
     expect(menu.shownItem(1).active()).toBe(false);
     expect(menu.shownItem(2).name()).toEqual("Morphology");
     expect(menu.shownItem(2).active()).toBe(false);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate next (1)
     menu.next();
@@ -570,7 +576,7 @@
     expect(menu.shownItem(1).active()).toBe(true);
     expect(menu.shownItem(2).name()).toEqual("Morphology");
     expect(menu.shownItem(2).active()).toBe(false);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
 
     // Activate prev (6)
     menu.prev();
@@ -583,7 +589,7 @@
     expect(menu.shownItem(1).active()).toBe(false);
     expect(menu.shownItem(2).name()).toEqual("Syntax");
     expect(menu.shownItem(2).active()).toBe(true);
-    expect(menu.element().childNodes[3]).toBe(undefined);
+    expect(menu.element().childNodes[4]).toBe(undefined);
   });
 
 
@@ -591,43 +597,51 @@
     var menu = KorAP.HintMenu.create("cnx/", list);
     menu.limit(2);
 
-    expect(menu.show("o")).toBe(true);
-
+    expect(menu.prefix("o").show()).toBe(true);
     expect(menu.shownItem(0).name()).toEqual("Constituency");
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
     expect(menu.shownItem(0).active()).toBe(true);
     expect(menu.shownItem(1).name()).toEqual("Morphology");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
     expect(menu.shownItem(1).active()).toBe(false);
     expect(menu.shownItem(2)).toBe(undefined);
 
     // Next (1)
     menu.next();
     expect(menu.shownItem(0).name()).toEqual("Constituency");
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
     expect(menu.shownItem(0).active()).toBe(false);
     expect(menu.shownItem(1).name()).toEqual("Morphology");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
     expect(menu.shownItem(1).active()).toBe(true);
     expect(menu.shownItem(2)).toBe(undefined);
 
     // Next (2)
     menu.next();
     expect(menu.shownItem(0).name()).toEqual("Morphology");
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
     expect(menu.shownItem(0).active()).toBe(false);
     expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
     expect(menu.shownItem(1).active()).toBe(true);
     expect(menu.shownItem(2)).toBe(undefined);
 
-    // Next (3)
+    // Next (3) - to prefix
+    menu.next();
+    expect(menu.shownItem(0).name()).toEqual("Morphology");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2)).toBe(undefined);
+
     menu.next();
     expect(menu.shownItem(0).name()).toEqual("Constituency");
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
     expect(menu.shownItem(0).active()).toBe(true);
     expect(menu.shownItem(1).name()).toEqual("Morphology");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
     expect(menu.shownItem(1).active()).toBe(false);
     expect(menu.shownItem(2)).toBe(undefined);
   });
@@ -637,33 +651,36 @@
     var menu = KorAP.HintMenu.create("cnx/", list);
 
     menu.limit(2);
-    expect(menu.show("ex")).toBe(true);
+    expect(menu.prefix("ex").show()).toBe(true);
 
     expect(menu.shownItem(0).name()).toEqual("Constituency");
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
     expect(menu.shownItem(0).active()).toBe(true);
     expect(menu.shownItem(1).name()).toEqual("Morphology");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
     expect(menu.shownItem(1).active()).toBe(false);
     expect(menu.shownItem(2)).toBe(undefined);
 
     // Next (1)
     menu.next();
     expect(menu.shownItem(0).name()).toEqual("Constituency");
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
     expect(menu.shownItem(0).active()).toBe(false);
     expect(menu.shownItem(1).name()).toEqual("Morphology");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
     expect(menu.shownItem(1).active()).toBe(true);
     expect(menu.shownItem(2)).toBe(undefined);
 
     // Next (2)
     menu.next();
+
+    expect(menu.prefix()).toEqual('ex');
     expect(menu.shownItem(0).name()).toEqual("Constituency");
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
-    expect(menu.shownItem(0).active()).toBe(true);
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+    expect(menu.shownItem(0).active()).toBe(false);
+
     expect(menu.shownItem(1).name()).toEqual("Morphology");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
     expect(menu.shownItem(1).active()).toBe(false);
     expect(menu.shownItem(2)).toBe(undefined);
 
@@ -671,34 +688,295 @@
     menu.limit(5);
 
     // Change show
-    expect(menu.show("e")).toBe(true);
+    expect(menu.prefix("e").show()).toBe(true);
 
     expect(menu.shownItem(0).name()).toEqual("Constituency");
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
     expect(menu.shownItem(0).active()).toBe(true);
     expect(menu.shownItem(1).name()).toEqual("Morphology");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
     expect(menu.shownItem(1).active()).toBe(false);
     expect(menu.shownItem(2)).toBe(undefined);
 
     // Next (1)
     menu.next();
+    expect(menu._prefix.active()).toBe(false);
+    expect(menu.prefix()).toEqual('e');
     expect(menu.shownItem(0).name()).toEqual("Constituency");
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
     expect(menu.shownItem(0).active()).toBe(false);
     expect(menu.shownItem(1).name()).toEqual("Morphology");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
     expect(menu.shownItem(1).active()).toBe(true);
     expect(menu.shownItem(2)).toBe(undefined);
 
     // Next (2)
     menu.next();
+    expect(menu._prefix.active()).toBe(true);
     expect(menu.shownItem(0).name()).toEqual("Constituency");
-    expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Morphology");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2)).toBe(undefined);
+
+    // Next (3)
+    menu.next();
+    expect(menu._prefix.active()).toBe(false);
+    expect(menu.shownItem(0).name()).toEqual("Constituency");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
     expect(menu.shownItem(0).active()).toBe(true);
     expect(menu.shownItem(1).name()).toEqual("Morphology");
-    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
     expect(menu.shownItem(1).active()).toBe(false);
     expect(menu.shownItem(2)).toBe(undefined);
   });
+
+
+  it('shouldn\'t be viewable with failing prefix', function () {
+    var menu = KorAP.HintMenu.create("cnx/", list);
+    menu.limit(2);
+    expect(menu.prefix("exit").show()).toBe(false);    
+  });
+
+  it('should be navigatable with prefix', function () {
+    var menu = KorAP.HintMenu.create("cnx/", demolist);
+    menu.limit(3);
+
+    expect(menu.show()).toBe(true);
+    expect(menu.prefix()).toEqual("");
+
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+    expect(menu.shownItem(0).active()).toBe(true);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+    expect(menu.shownItem(2).active()).toBe(false);
+    expect(menu.shownItem(3)).toBe(undefined);
+
+    menu._prefix.add('a');
+    expect(menu.show()).toBe(true);
+    expect(menu.prefix()).toEqual("a");
+    expect(menu.shownItem(0).name()).toEqual("Autor");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
+
+    menu._prefix.add('u');
+    expect(menu.show()).toBe(true);
+    expect(menu.prefix()).toEqual("au");
+    expect(menu.shownItem(0).name()).toEqual("Autor");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong><mark>Au</mark>tor</strong>");
+
+    menu._prefix.backspace();
+    expect(menu.show()).toBe(true);
+    expect(menu.prefix()).toEqual("a");
+    expect(menu.shownItem(0).name()).toEqual("Autor");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
+
+    menu._prefix.backspace();
+    expect(menu.show()).toBe(true);
+    expect(menu.prefix()).toEqual("");
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+    expect(menu.shownItem(0).active()).toBe(true);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+    expect(menu.shownItem(2).active()).toBe(false);
+    expect(menu.shownItem(3)).toBe(undefined);
+
+    // Forward
+    menu._prefix.backspace();
+    expect(menu.show()).toBe(true);
+    expect(menu.prefix()).toEqual("");
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+    expect(menu.shownItem(0).active()).toBe(true);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+    expect(menu.shownItem(2).active()).toBe(false);
+
+    // Forward
+    menu.next();
+    expect(menu.prefix()).toEqual("");
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+    expect(menu.shownItem(1).active()).toBe(true);
+    expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+    expect(menu.shownItem(2).active()).toBe(false);
+    expect(menu.shownItem(3)).toBe(undefined);
+
+    // Forward
+    menu.next();
+    expect(menu.prefix()).toEqual("");
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+    expect(menu.shownItem(2).active()).toBe(true);
+    expect(menu.shownItem(3)).toBe(undefined);
+
+    // Forward
+    menu.next();
+    expect(menu.prefix()).toEqual("");
+    expect(menu.shownItem(0).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Veröffentlichungsdatum");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2).name()).toEqual("Länge");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Länge</strong>");
+    expect(menu.shownItem(2).active()).toBe(true);
+    expect(menu.shownItem(3)).toBe(undefined);
+
+    // Forward
+    menu.next();
+    expect(menu.prefix()).toEqual("");
+    expect(menu.shownItem(0).name()).toEqual("Veröffentlichungsdatum");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Länge");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Länge</strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2).name()).toEqual("Autor");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Autor</strong>");
+    expect(menu.shownItem(2).active()).toBe(true);
+    expect(menu.shownItem(3)).toBe(undefined);
+
+    // Forward
+    menu.next();
+    expect(menu.prefix()).toEqual("");
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+    expect(menu.shownItem(0).active()).toBe(true);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+    expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+    expect(menu.shownItem(2).active()).toBe(false);
+
+  });
+
+
+  it('should be navigatable with a prefix (1)', function () {
+    var menu = KorAP.HintMenu.create("cnx/", demolist);
+    menu.limit(3);
+
+    expect(menu.show()).toBe(true);
+    expect(menu.prefix()).toEqual("");
+
+    menu.prefix('el');
+    expect(menu.show()).toBe(true);
+
+    expect(menu.prefix()).toEqual("el");
+    expect(menu._prefix.active()).toEqual(false);
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+    expect(menu.shownItem(0).active()).toBe(true);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2)).toBe(undefined);
+
+    // Forward
+    menu.next();
+    expect(menu.prefix()).toEqual("el");
+    expect(menu._prefix.active()).toEqual(false);
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+    expect(menu.shownItem(1).active()).toBe(true);
+    expect(menu.shownItem(2)).toBe(undefined);
+
+    // Forward
+    menu.next();
+    expect(menu.prefix()).toEqual("el");
+    expect(menu._prefix.active()).toEqual(true);
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2)).toBe(undefined);
+
+
+    // Backward
+    menu.prev();
+    expect(menu.prefix()).toEqual("el");
+    expect(menu._prefix.active()).toEqual(false);
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+    expect(menu.shownItem(1).active()).toBe(true);
+    expect(menu.shownItem(2)).toBe(undefined);
+  });
+
+  xit('should be navigatable with a prefix (2)', function () {
+    var menu = KorAP.HintMenu.create("cnx/", demolist);
+    menu.limit(3);
+    expect(menu.show()).toBe(true);
+    expect(menu.prefix()).toEqual("");
+    menu.prefix('el');
+    expect(menu.show()).toBe(true);
+
+    expect(menu.prefix()).toEqual("el");
+    expect(menu._prefix.active()).toEqual(false);
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+    expect(menu.shownItem(0).active()).toBe(true);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2)).toBe(undefined);
+
+    // Backward
+    menu.prev();
+    expect(menu._prefix.active()).toEqual(true);
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+    expect(menu.shownItem(1).active()).toBe(false);
+    expect(menu.shownItem(2)).toBe(undefined);
+
+    // Backward
+/*
+    menu.prev();
+    expect(menu._prefix.active()).toEqual(false);
+    expect(menu.shownItem(0).name()).toEqual("Titel");
+    expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+    expect(menu.shownItem(0).active()).toBe(false);
+    expect(menu.shownItem(1).name()).toEqual("Untertitel");
+    expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+    expect(menu.shownItem(1).active()).toBe(true);
+    expect(menu.shownItem(2)).toBe(undefined);
+*/
+  });
+
+  xit('should be page downable');
+  xit('should be page upable');
 });
diff --git a/public/js/src/menu.js b/public/js/src/menu.js
index 175360a..c5bd2f8 100644
--- a/public/js/src/menu.js
+++ b/public/js/src/menu.js
@@ -44,102 +44,114 @@
     // mouse wheel treatment
     _mousewheel : function (e) {
       var delta = 0;
-      if (e.wheelDelta) {
-	delta = event.wheelDelta / 120; 
-      }
-      else if (e.detail) {
-	delta = - e.detail / 3;
-      };
-      if (delta < 0) {
+
+      delta = e.deltaY / 120;
+      if (delta > 0)
 	this.next();
-      }
-      else {
+      else if (delta < 0)
 	this.prev();
-      };
       e.halt();
     },
 
     // Arrow key and prefix treatment
-    _keydown : function (e) {
+    _keypress : function (e) {
       var code = _codeFromEvent(e);
 
-      /*
-       * keyCodes:
-       * - Down  = 40
-       * - Esc   = 27
-       * - Up    = 38
-       * - Enter = 13
-       * - shift = 16
-       * for characters use e.key
-       */
-
       switch (code) {
       case 27: // 'Esc'
 	e.halt();
 	this.hide();
 	break;
-      case 40: // 'Down'
-	e.halt();
-	this.next();
-	break;
+
       case 38: // 'Up'
 	e.halt();
 	this.prev();
 	break;
-      case 13: // 'Enter'
-	console.log('hide');
+      case 33: // 'Page up'
 	e.halt();
-	this.hide();
+	this.prev();
+	break;
+      case 40: // 'Down'
+	e.halt();
+	this.next();
+	break;
+      case 34: // 'Page down'
+	e.halt();
+	this.next();
+	break;
+      case 39: // 'Right'
+	var item = this.liveItem(this._position);
+	if (item["further"] !== undefined) {
+	  item["further"].bind(item).apply();
+	  e.halt();
+	};
+	break;
+      case 13: // 'Enter'
+
+	// Click on prefix
+	if (this._prefix.active())
+	  this._prefix.onclick();
+
+	// Click on item
+	else
+	  this.liveItem(this._position).onclick();
+	e.halt();
 	break;
       case 8: // 'Backspace'
-	var p = this.prefix();
-	if (p.length > 1) {
-	  p = p.substring(0, p.length - 1)
-	  this.show(p);
-	}
-	else {
-	  this.show();
-	};
+	this._prefix.backspace();
+	this.show();
 	e.halt();
 	break;
       default:
-	if (e.key !== undefined && e.key.length != 1)
+	if (e.key !== undefined &&
+	    e.key.length != 1)
 	  return;
 
 	// Add prefix
-	if (!this.show(this.prefix() + e.key))
-	  this.hide();
+	this._prefix.add(e.key.toLowerCase());
+
+	if (!this.show()) {
+	  this.prefix('').show();
+	};
       };
     },
 
     // Initialize list
-    _init : function (itemClass, params) {
-      // this._element.addEventListener("click", chooseHint, false);
+    _init : function (itemClass, prefixClass, params) {
       var that = this;
       this._itemClass = itemClass;
-      var e =this._element = document.createElement("ul");
+
+      if (prefixClass !== undefined)
+	this._prefix = prefixClass.create();
+      else
+	this._prefix = KorAP.MenuPrefix.create();
+
+      var e = document.createElement("ul");
       e.style.opacity = 0;
       e.style.outline = 0;
       e.setAttribute('tabindex', 0);
+      e.setAttribute('class', 'menu');
+      e.appendChild(this._prefix.element());
 
       // Arrow keys
       e.addEventListener(
-	"keydown",
+	'keypress',
 	function (ev) {
-	  that._keydown(ev)
+	  that._keypress(ev)
 	},
 	false
       );
 
       // Mousewheel
       e.addEventListener(
-	'DOMMouseScroll',
+	'wheel',
 	function (ev) {
 	  that._mousewheel(ev)
 	},
 	false
       );
 
+      this._element = e;
       this.active = false;
       this._items = new Array();
       var i;
@@ -175,8 +187,10 @@
      * i.e. the number of items visible.
      */
     limit : function (limit) {
-      if (arguments.length === 1)
+      if (arguments.length === 1) {
 	this._limit = limit;
+	return this;
+      };
       return this._limit;
     },
 
@@ -197,7 +211,7 @@
     _reset : function () {
       this._offset = 0;
       this._pos    = 0;
-      this._prefix = undefined;
+      this._prefix.value('');
     },
 
     /**
@@ -205,9 +219,7 @@
      *
      * @param {string} Prefix for filtering the list
      */
-    show : function (prefix) {
-      this._prefix = prefix;
-
+    show : function () {
       // Initialize the list
       if (!this._initList())
 	return false;
@@ -219,9 +231,8 @@
       // Todo: Or the last element chosen
       this.liveItem(0).active(true);
 
-      this._position = 0;
       this._active = this._list[0];
-
+      this._position = 0;
       this._element.style.opacity = 1;
 
       // Add classes for rolling menus
@@ -256,8 +267,13 @@
 
       // There is no prefix set
       if (this.prefix().length <= 0) {
-	for (var i = 0; i < this._items.length; i++)
+	var i = 0;
+	for (; i < this._items.length; i++)
 	  this._list.push(i);
+	while (this._items[++i] !== undefined) {
+	  this._items[i].lowlight();
+	  console.log(this._item);
+	};
 	return true;
       };
 
@@ -296,8 +312,12 @@
      * Get the prefix for filtering,
      * e.g. &quot;ve&quot; for &quot;verb&quot;
      */
-    prefix : function () {
-      return this._prefix || '';
+    prefix : function (pref) {
+      if (arguments.length === 1) {
+	this._prefix.value(pref);
+	return this;
+      };
+      return this._prefix.value();
     },
 
     // Append Items that should be shown
@@ -326,19 +346,32 @@
     delete : function () {
       var child;
 
+      /*
       // Iterate over all visible items
       for (var i = 0; i <= this.limit(); i++) {
 
-	// there is a visible element - unhighlight!
+	// there is a visible element
+	// unhighlight!
 	if (child = this.shownItem(i)) {
 	  child.lowlight();
 	  child.active(false);
 	};
       };
+      */
+
+      for (var i in this._list) {
+	var item = this._items[this._list[i]];
+	item.lowlight();
+	item.active(false);	
+      };
 
       // Remove all children
-      while (child = this._element.firstChild)
-	this._element.removeChild(child);
+      var children = this._element.childNodes;
+      for (var i = children.length - 1; i >= 1; i--) {
+	this._element.removeChild(
+	  children[i]
+	);
+      };
     },
 
 
@@ -367,7 +400,7 @@
       // Append element
       e.insertBefore(
 	item.element(),
-	e.firstChild
+	e.children[1]
       );
     },
 
@@ -422,21 +455,36 @@
      * Make the next item in the filtered menu active
      */
     next : function () {
+
       // No active element set
-      if (this._position == -1)
+      if (this._position === -1)
 	return;
 
+      var newItem;
+
       // Set new live item
       var oldItem = this.liveItem(this._position++);
       oldItem.active(false);
-      var newItem = this.liveItem(this._position);
+      newItem = this.liveItem(this._position);
 
-      // The next element is undefined - roll to top
+      // The next element is undefined - roll to top or to prefix
       if (newItem === undefined) {
-	this._offset = 0;
-	this._position = 0;
-	newItem = this.liveItem(0);
-	this._showItems(0);
+
+	// Activate prefix
+	var prefix = this._prefix;
+
+	// Mark prefix
+	if (prefix.isSet() && !prefix.active()) {
+	  this._position--;
+	  prefix.active(true);
+	  return;
+	}
+	else {
+	  this._offset = 0;
+	  this._position = 0;
+	  newItem = this.liveItem(0);
+	  this._showItems(0);
+	};
       }
 
       // The next element is outside the view - roll down
@@ -445,6 +493,8 @@
 	this._offset++;
 	this._append(this._list[this._position]);
       };
+
+      this._prefix.active(false);
       newItem.active(true);
     },
 
@@ -457,17 +507,30 @@
       if (this._position == -1)
 	return;
 
+      var newItem;
+
       // Set new live item
       var oldItem = this.liveItem(this._position--);
       oldItem.active(false);
-      var newItem = this.liveItem(this._position);
+      newItem = this.liveItem(this._position);
 
       // The previous element is undefined - roll to bottom
       if (newItem === undefined) {
+
+	// Activate prefix
+	var prefix = this._prefix;
 	this._offset = this.liveLength() - this.limit();
 	this._position = this.liveLength() - 1;
-	newItem = this.liveItem(this._position);
-	this._showItems(this._offset);
+
+	if (prefix.isSet() && !prefix.active()) {
+	  this._position++;
+	  prefix.active(true);
+	  return;
+	}
+	else {
+	  newItem = this.liveItem(this._position);
+	  this._showItems(this._offset);
+	};
       }
 
       // The previous element is outside the view - roll up
@@ -477,14 +540,23 @@
 	this._prepend(this._list[this._position]);
       };
 
+      this._prefix.active(false);
       newItem.active(true);
     },
 
 
+    // Length of the filtered list
+    liveLength : function () {
+      if (this._list === undefined)
+	this._initList();
+      return this._list.length;
+    },
+
+
     // Remove the HTML node from the first item
     _removeFirst : function () {
       this.item(this._list[this._offset]).lowlight();
-      this._element.removeChild(this._element.firstChild);
+      this._element.removeChild(this._element.children[1]);
     },
 
 
@@ -492,13 +564,6 @@
     _removeLast : function () {
       this.item(this._list[this._offset + this.limit() - 1]).lowlight();
       this._element.removeChild(this._element.lastChild);
-    },
-
-    // Length of the filtered list
-    liveLength : function () {
-      if (this._list === undefined)
-	this._initList();
-      return this._list.length;
     }
   };
 
@@ -533,6 +598,7 @@
       return this;
     },
 
+
     content : function (content) {
       if (arguments.length === 1)
 	this._content = document.createTextNode(content);
@@ -593,7 +659,8 @@
       var li = document.createElement("li");
 
       // Connect action
-      li["action"] = this._action;
+      if (this.onclick !== undefined)
+	li["onclick"] = this.onclick.bind(this);
 
       // Append template
       li.appendChild(this.content());
@@ -703,10 +770,89 @@
     },
   };
 
+  KorAP.MenuPrefix = {
+    create : function (params) {
+      return Object.create(KorAP.MenuPrefix)._init();
+    },
+    _init : function () {
+      this._string = '';
+
+      // Add prefix span
+      this._element = document.createElement('span');
+      this._element.classList.add('pref');
+      return this;
+    },
+    _update : function () {
+      this._element.innerHTML
+      = this._string;
+    },
+
+    /**
+     * Upgrade this object to another object,
+     * while private data stays intact.
+     *
+     * @param {Object} An object with properties.
+     */
+    upgradeTo : function (props) {
+      for (var prop in props) {
+	this[prop] = props[prop];
+      };
+      return this;
+    },
+
+    active : function (bool) {
+      var cl = this.element().classList;
+      if (bool === undefined)
+	return cl.contains("active");
+      else if (bool)
+	cl.add("active");
+      else
+	cl.remove("active");
+    },
+    element : function () {
+      return this._element;
+    },
+    isSet : function () {
+      return this._string.length > 0 ?
+	true : false;
+    },
+    value : function (string) {
+      if (arguments.length === 1) {
+	this._string = string;
+	this._update();
+      };
+      return this._string;
+    },
+    add : function (string) {
+      this._string += string;
+      this._update();
+    },
+    onclick : function () {},
+    backspace : function () {
+      if (this._string.length > 1) {
+	this._string = this._string.substring(
+	  0, this._string.length - 1
+	);
+      }
+      else {
+	this._string = '';
+      };
+
+      this._update();
+    }
+  };
+
   function _codeFromEvent (e) {
-    if ((e.charCode) && (e.keyCode==0))
+    if (e.charCode && (e.keyCode == 0))
       return e.charCode
     return e.keyCode;
   };
 
 }(this.KorAP));
+
+/**
+ * MenuItems may define:
+ *
+ * onclick: action happen on click and enter.
+ * further: action happen on right arrow
+ */