diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SuggestRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SuggestRenderer.java
index 95bf01d..1fbc1c9 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SuggestRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SuggestRenderer.java
@@ -29,6 +29,7 @@
 import org.apache.myfaces.tobago.renderkit.html.CustomAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
+import org.apache.myfaces.tobago.renderkit.html.HtmlInputTypes;
 import org.apache.myfaces.tobago.util.ComponentUtils;
 import org.apache.myfaces.tobago.webapp.TobagoResponseWriter;
 import org.slf4j.Logger;
@@ -121,12 +122,17 @@
     writer.writeAttribute(CustomAttributes.UPDATE, suggest.isUpdate());
     writer.writeAttribute(CustomAttributes.TOTAL_COUNT, totalCount);
     writer.writeAttribute(CustomAttributes.LOCAL_MENU, suggest.isLocalMenu());
-    writer.writeAttribute(CustomAttributes.DATA, JsonUtils.encode(array), true);
+    writer.writeAttribute(CustomAttributes.ITEMS, JsonUtils.encode(array), true);
 
     if (LOG.isDebugEnabled()) {
       LOG.debug("suggest list: {}", JsonUtils.encode(array));
     }
 
+    writer.startElement(HtmlElements.INPUT);
+    writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.HIDDEN);
+    writer.writeAttribute(HtmlAttributes.NAME, clientId, false);
+    writer.endElement(HtmlElements.INPUT);
+
     writer.endElement(HtmlElements.TOBAGO_SUGGEST);
   }
 
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
index d6a003d..7b8030b 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
@@ -24,7 +24,6 @@
   COLLAPSE_ACTION("collapse-action"),
   COLLAPSE_TARGET("collapse-target"),
   CONFIRMATION("confirmation"),
-  DATA("data"),
   DELAY("delay"),
   EVENT("event"),
   /**
@@ -37,6 +36,7 @@
    * The index of the tab inside the tab group.
    */
   INDEX("index"),
+  ITEMS("items"),
   LOCALE("locale"),
   LOCAL_MENU("local-menu"),
   MAX_ITEMS("max-items"),
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 95017c9..0528fce 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -1384,94 +1384,6 @@
   display: none;
 }
 
-.typeahead {
-  background-color: #FFFFFF;
-
-  &:focus {
-    border: 2px solid #0097CF;
-  }
-}
-
-.tt-query {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
-}
-
-.tt-hint {
-  color: #aaaaaa;
-}
-
-.tt-menu {
-  display: none;
-  position: absolute;
-  z-index: $zindex-popover;
-  background-color: #FFFFFF;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  margin-top: 1px;
-  padding: 8px 0;
-}
-
-.tt-open {
-  display: block;
-}
-
-.twitter-typeahead .tt-open {
-  /* for 'localMenu' - if suggest menu rendered directly on component - not in .tobago-page-menuStore */
-  min-width: 100%;
-}
-
-.tt-empty {
-  display: none;
-}
-
-.tt-suggestion {
-  padding: 3px 20px;
-
-  &:hover {
-    background-color: #0097CF;
-    color: #FFFFFF;
-    cursor: pointer;
-  }
-
-  &.tt-cursor {
-    background-color: #0097CF;
-    color: #FFFFFF;
-  }
-
-  p {
-    margin: 0;
-  }
-}
-
-.twitter-typeahead {
-  display: flex !important;
-  flex-grow: 1;
-}
-
-.input-group > .twitter-typeahead {
-  /* suggest in center of an input group */
-  > .tobago-in {
-    width: 100%;
-    border-radius: 0;
-  }
-
-  &:first-child {
-    /* suggest on the left of an input group */
-    > .tobago-in {
-      border-top-left-radius: $border-radius;
-      border-bottom-left-radius: $border-radius;
-    }
-  }
-  &:last-child {
-    /* suggest on the right of an input group */
-    > .tobago-in {
-      border-top-right-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-    }
-  }
-}
-
 /* tab / tab-group ----------------------------------------------------------------- */
 .tobago-tabGroup, .tobago-tab, .tobago-tab-content {
 }
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.xhtml
index 549d76b..8459a0a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.xhtml
@@ -51,6 +51,7 @@
         <tc:selectItems value="#{suggestController.solarObjects}" var="name" itemValue="#{name}"/>
       </tc:suggest>
     </tc:in>
+    <h1>Warning: Tab key doesn't work here!</h1> <!-- fixme -->
   </tc:section>
 
   <tc:section label="Advanced">
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/package.json b/tobago-theme/tobago-theme-standard/src/main/npm/package.json
index d79929c..1c79281 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/package.json
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/package.json
@@ -31,7 +31,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "@vaadin/vaadin-date-picker": "^4.0.5"
+    "@vaadin/vaadin-date-picker": "^4.0.5",
+    "@vaadin/vaadin-combo-box": "^5.0.9"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts
index 152dc7e..ea981ed 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/declare.d.ts
@@ -24,6 +24,4 @@
   popover(data?: any, options?: any): JQuery;
 
   modal(data?: any, options?: any): JQuery;
-
-  typeahead(data?: any, options?: any): JQuery;
 }
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
index e9f78c5..b8cb52b 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
@@ -23,7 +23,7 @@
 import "@vaadin/vaadin-date-picker/vaadin-date-picker-light.js";
 // import "@vaadin/vaadin-date-time-picker";
 // import "@vaadin/vaadin-time-picker";
-// import "@vaadin/vaadin-combo-box";
+import "@vaadin/vaadin-combo-box/vaadin-combo-box-light";
 // import "moment"; //XXX moment seems not to work with rollup.js, need to re-check
 import "./tobago-date";
 import "./tobago-command";
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-suggest.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-suggest.ts
index 31ceeea..f935664 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-suggest.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-suggest.ts
@@ -15,70 +15,25 @@
  * limitations under the License.
  */
 
-import {DomUtils} from "./tobago-utils";
+import {ComboBoxLightElement} from "@vaadin/vaadin-combo-box/vaadin-combo-box-light";
 
 class Suggest extends HTMLElement {
 
-  static asyncResults: (data: string[]) => void;
+  static callback: (items: String[], size: number) => {};// todo string vs String
 
-  hiddenInput: HTMLInputElement;
-
-  static loadFromServer = function (input: HTMLInputElement): (query, syncResults, asyncResults) => void {
-
-    let timeout;
-
-    return function findMatches(query, syncResults, asyncResults): void {
-
-      const root = input.getRootNode() as ShadowRoot | Document;
-      let suggest = root.getElementById(input.dataset.tobagoSuggestFor) as Suggest;
-
-      // todo: suggest.hiddenInput.value should contain the last query value
-      if (suggest.hiddenInput.value !== query) {
-
-        if (timeout) {
-          clearTimeout(timeout);
-        }
-
-        const delay = suggest.delay;
-
-        timeout = setTimeout(function (): void {
-          suggest.hiddenInput.value = query;
-          Suggest.asyncResults = asyncResults;
-          delete suggest.dataset.tobagoSuggestData;
-          console.info("query: '" + query + "'");
-
-          jsf.ajax.request(
-              suggest.id,
-              null, // todo: event?
-              {
-                "javax.faces.behavior.event": "suggest",
-                execute: suggest.id,
-                render: suggest.id
-              });
-        }, delay);
-
-      }
-    };
-  };
-
-  static fromClient = function (data): (query, syncResults) => void {
-    return (query, syncResults): void => {
-      const result = [];
-      for (let i = 0; i < data.length; i++) {
-        if (data[i].indexOf(query) >= 0) {
-          result.push(data[i]);
-        }
-      }
-      syncResults(result);
-    };
-  };
+  static timeout: number;
 
   constructor() {
     super();
-    this.hiddenInput = document.createElement("input");
-    this.hiddenInput.setAttribute("type", "hidden");
-    this.hiddenInput.setAttribute("name", this.id);
-    this.appendChild(this.hiddenInput);
+  }
+
+  get hiddenInput(): HTMLInputElement {
+    return this.querySelector(":scope > input[type=hidden]");
+  }
+
+  get suggestInput(): HTMLInputElement {
+    const root = this.getRootNode() as ShadowRoot | Document;
+    return root.getElementById(this.for) as HTMLInputElement;
   }
 
   get for(): string {
@@ -133,12 +88,12 @@
     this.setAttribute("total-count", String(totalCount));
   }
 
-  get data(): string[] {
-    return JSON.parse(this.getAttribute("data"));
+  get items(): string[] {
+    return JSON.parse(this.getAttribute("items"));
   }
 
-  set data(data: string[]) {
-    this.setAttribute("data", JSON.stringify(data));
+  set items(items: string[]) {
+    this.setAttribute("items", JSON.stringify(items));
   }
 
   get localMenu(): boolean {
@@ -154,76 +109,65 @@
   }
 
   connectedCallback(): void {
-    const root = this.getRootNode() as ShadowRoot | Document;
-    const input = root.getElementById(this.for) as HTMLInputElement;
-    const $input = jQuery(input);
 
-    if (this.update && input.classList.contains("tt-input")) { // already initialized: so only update data
-      if (Suggest.asyncResults) {
-        Suggest.asyncResults(this.data);
-        Suggest.asyncResults = null;
-      }
-    } else { // new
-      input.dataset.tobagoSuggestFor = this.id;
-      input.autocomplete = "off";
+    let vaadinComboBox: ComboBoxLightElement = this.suggestInput.parentElement;
 
-      let source;
-      if (this.update) {
-        source = Suggest.loadFromServer(input);
+    if (vaadinComboBox.tagName !== "VAADIN-COMBO-BOX-LIGHT") { // new
+      vaadinComboBox = document.createElement("vaadin-combo-box-light");
+      vaadinComboBox.attrForValue = "value";
+      vaadinComboBox.allowCustomValue = true;
+      vaadinComboBox.readOnly = this.suggestInput.readOnly;
+      vaadinComboBox.disabled = this.suggestInput.disabled;
+      this.suggestInput.classList.add("input"); // todo do this in SuggestRenderer?
+      const parent = this.suggestInput.parentElement;
+      vaadinComboBox.appendChild(this.suggestInput);
+      parent.appendChild(vaadinComboBox);
+
+      vaadinComboBox.dataProvider = function dataProvider(
+          params: { page: number, pageSize: number, filter: string },
+          callback: (items: String[], size: number) => {}): void {
+        console.info("call for data: %o", params);
+        console.info("vaadinComboBox id: %s", vaadinComboBox.id);
+        const suggest = vaadinComboBox.closest("tobago-in").querySelector("tobago-suggest") as Suggest;
+        suggest.hiddenInput.value = params.filter;
+        if (suggest.update) {
+          if (params.filter.length >= suggest.minChars) {
+            if (Suggest.timeout) {
+              clearTimeout(Suggest.timeout);
+            }
+            Suggest.timeout = window.setTimeout(function (): void {
+              Suggest.callback = callback;
+              jsf.ajax.request(
+                  suggest.id,
+                  null, // todo: event?
+                  {
+                    "javax.faces.behavior.event": "suggest",
+                    execute: suggest.id,
+                    render: suggest.id
+                  });
+            }, suggest.delay);
+          } else {
+            callback([], 0);
+          }
+        } else {
+          const items = suggest.items;
+          const filteredItems:string[] = [];
+          const lowerFilter = params.filter.toLocaleLowerCase();
+          for (const item of items) {
+            if (item.toLowerCase().indexOf(lowerFilter) > -1) {
+              filteredItems.push(item);
+            }
+          }
+          callback(filteredItems, filteredItems.length);
+        }
+      };
+    } else { // already initialized: so update items (from AJAX) only
+      if (Suggest.callback) {
+        Suggest.callback(this.items, this.totalCount);
+        Suggest.callback = null;
       } else {
-        source = Suggest.fromClient(this.data);
+        console.warn("Missing Suggest.callback!");
       }
-
-      let suggestPopup = root.getElementById(this.id + "::popup");
-      if (suggestPopup) {
-        suggestPopup.parentElement.removeChild(suggestPopup);
-      }
-      suggestPopup = document.createElement("div");
-      suggestPopup.id = this.id + "::popup";
-      suggestPopup.classList.add("tt-menu", "tt-empty");
-      root.querySelector(".tobago-page-menuStore").appendChild(suggestPopup);
-
-      const menu = this.localMenu ? null : suggestPopup;
-
-      $input.typeahead({
-        menu: menu,
-        minLength: this.minChars,
-        hint: true,// todo
-        highlight: true // todo
-      }, {
-        //name: 'test',// todo
-        limit: this.maxItems,
-        source: source
-      });
-      // old with jQuery:
-      $input.on("typeahead:change", function (event: JQuery.Event): void {
-        const input = this;
-        input.dispatchEvent(new Event("change"));
-      });
-      // new without jQuery:
-      // input.addEventListener("typeahead:change", (event: Event) => {
-      //   const input = event.currentTarget as HTMLInputElement;
-      //   input.dispatchEvent(new Event("change"));
-      // });
-
-      // old with jQuery:
-      $input.on("typeahead:open", function (event: JQuery.Event): void {
-        const input = this;
-        const suggestPopup = root.getElementById(input.dataset.tobagoSuggestFor + "::popup");
-        suggestPopup.style.top = DomUtils.offset(input).top + input.offsetHeight + "px";
-        suggestPopup.style.left = DomUtils.offset(input).left + "px";
-        suggestPopup.style.minWidth = input.offsetWidth + "px";
-      });
-
-      // new without jQuery:
-      // input.addEventListener("typeahead:open", (event: Event) => {
-      //   const input = event.currentTarget as HTMLInputElement;
-      //   const suggestPopup = document.getElementById(input.dataset.tobagoSuggestFor + "::popup");
-      //   suggestPopup.style.top = DomUtils.offset(input).top + input.offsetHeight + "px";
-      //   suggestPopup.style.left = DomUtils.offset(input).left + "px";
-      //   suggestPopup.style.minWidth = input.offsetWidth + "px";
-      // });
-
     }
   }
 }