diff --git a/demo/vcf-autocomplete-basic-demos.html b/demo/vcf-autocomplete-basic-demos.html
index 7cc52c8..b0da7d2 100644
--- a/demo/vcf-autocomplete-basic-demos.html
+++ b/demo/vcf-autocomplete-basic-demos.html
@@ -9,8 +9,7 @@
     <h3>Demo sample</h3>
     <vaadin-demo-snippet id="vcf-autocomplete-demo-sample">
       <template preserve-content>
-        <vcf-autocomplete id="demo1" label="Choose country" placeholder="Start typing a country name...">
-        </vcf-autocomplete>
+        <vcf-autocomplete id="demo1" label="Choose country" placeholder="Start typing a country name..."> </vcf-autocomplete>
 
         <div>
           Last applied value:
@@ -21,7 +20,7 @@ <h3>Demo sample</h3>
         <script>
           function getData(callback) {
             var xhr = new XMLHttpRequest();
-            xhr.onload = function() {
+            xhr.onload = function () {
               callback(JSON.parse(xhr.responseText));
             };
 
@@ -32,7 +31,7 @@ <h3>Demo sample</h3>
             xhr.send();
           }
 
-          window.addDemoReadyListener('#vcf-autocomplete-demo-sample', function(document) {
+          window.addDemoReadyListener('#vcf-autocomplete-demo-sample', function (document) {
             const autocompleteElement = document.querySelector('#demo1');
             let countries = [];
 
@@ -42,7 +41,7 @@ <h3>Demo sample</h3>
 
             autocompleteElement.addEventListener('value-changed', (ev) => {
               if (countries.length) {
-                autocompleteElement.options = countries.filter(country => country.toLowerCase().indexOf(ev.detail.value.toLowerCase()) === 0);
+                autocompleteElement.options = countries.filter((country) => country.toLowerCase().indexOf(ev.detail.value.toLowerCase()) >= 0);
               }
             });
 
@@ -57,23 +56,19 @@ <h3>Demo sample</h3>
     <h3>Slow API demo</h3>
     <vaadin-demo-snippet id="vcf-autocomplete-demo-slow-api">
       <template preserve-content>
-        <vcf-autocomplete
-          id="demo2"
-          label="Choose country"
-          placeholder="Start typing a country name...">
-        </vcf-autocomplete>
+        <vcf-autocomplete id="demo2" label="Choose country" placeholder="Start typing a country name..."> </vcf-autocomplete>
 
         <script>
           let countries = [];
 
           function filterByValue(items, value) {
-            return items.filter(item => item.toLowerCase().indexOf(value.toLowerCase()) === 0);
+            return items.filter((item) => item.toLowerCase().indexOf(value.toLowerCase()) === 0);
           }
 
           function getDataDefer(callback, value) {
             if (!countries.length) {
               var xhr = new XMLHttpRequest();
-              xhr.onload = function() {
+              xhr.onload = function () {
                 countries = JSON.parse(xhr.responseText);
 
                 setTimeout(() => callback(filterByValue(countries, value)), 1000);
@@ -89,7 +84,7 @@ <h3>Slow API demo</h3>
             }
           }
 
-          window.addDemoReadyListener('#vcf-autocomplete-demo-slow-api', function(document) {
+          window.addDemoReadyListener('#vcf-autocomplete-demo-slow-api', function (document) {
             const autocompleteElement = document.querySelector('#demo2');
 
             autocompleteElement.addEventListener('value-changed', (ev) => {
diff --git a/src/vcf-autocomplete.html b/src/vcf-autocomplete.html
index 9a80c20..08926b9 100644
--- a/src/vcf-autocomplete.html
+++ b/src/vcf-autocomplete.html
@@ -6,20 +6,20 @@
 See <a href="https://vaadin.com/license/cval-3">the website</a> for the complete license.
 -->
 
-<link rel="import" href="../../polymer/polymer-element.html">
-<link rel="import" href="../../polymer/lib/elements/dom-if.html">
-<link rel="import" href="../../polymer/lib/elements/dom-repeat.html">
-<link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
-<link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">
-<link rel="import" href="../../vaadin-license-checker/vaadin-license-checker.html">
-<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
-<link rel="import" href="../../vaadin-text-field/vaadin-text-field.html">
-<link rel="import" href="../../vaadin-list-box/vaadin-list-box.html">
-<link rel="import" href="../../vaadin-item/vaadin-item.html">
-<link rel="import" href="../../vaadin-button/vaadin-button.html">
-<link rel="import" href="../../vaadin-lumo-styles/icons.html">
-<link rel="import" href="../../iron-icon/iron-icon.html">
-<link rel="import" href="vcf-autocomplete-overlay.html">
+<link rel="import" href="../../polymer/polymer-element.html" />
+<link rel="import" href="../../polymer/lib/elements/dom-if.html" />
+<link rel="import" href="../../polymer/lib/elements/dom-repeat.html" />
+<link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html" />
+<link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html" />
+<link rel="import" href="../../vaadin-license-checker/vaadin-license-checker.html" />
+<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html" />
+<link rel="import" href="../../vaadin-text-field/vaadin-text-field.html" />
+<link rel="import" href="../../vaadin-list-box/vaadin-list-box.html" />
+<link rel="import" href="../../vaadin-item/vaadin-item.html" />
+<link rel="import" href="../../vaadin-button/vaadin-button.html" />
+<link rel="import" href="../../vaadin-lumo-styles/icons.html" />
+<link rel="import" href="../../iron-icon/iron-icon.html" />
+<link rel="import" href="vcf-autocomplete-overlay.html" />
 
 <dom-module id="vcf-autocomplete">
   <template>
@@ -32,84 +32,60 @@
         pointer-events: auto;
       }
 
-      [part="options-container"] {
+      [part='options-container'] {
         min-width: var(--vcf-autocomplete-options-width);
       }
 
-      [part="bold"] {
+      [part='bold'] {
         font-weight: 600;
       }
 
-      [part="loading-indicator"]::after {
+      [part='loading-indicator']::after {
         content: 'Loading...';
       }
 
-      [part="no-results"]::after {
+      [part='no-results']::after {
         content: 'No results';
       }
     </style>
 
-    <vaadin-text-field
-      id="textField"
-      on-focus="_textFieldFocused"
-      label="[[label]]"
-      placeholder="[[placeholder]]">
+    <vaadin-text-field id="textField" on-focus="_textFieldFocused" label="[[label]]" placeholder="[[placeholder]]">
       <template is="dom-if" if="[[_hasValue(value)]]">
-        <vaadin-button
-          part="clear"
-          theme="icon tertiary small"
-          aria-label="Add new item"
-          slot="suffix"
-          on-click="clear">
-
-          <iron-icon icon="lumo:cross">
-          </iron-icon>
-
+        <vaadin-button part="clear" theme="icon tertiary small" aria-label="Add new item" slot="suffix" on-click="clear">
+          <iron-icon icon="lumo:cross"> </iron-icon>
         </vaadin-button>
       </template>
     </vaadin-text-field>
 
     <vcf-autocomplete-overlay opened="{{opened}}">
       <template>
-        <vaadin-list-box
-          part="options-container">
-
+        <vaadin-list-box part="options-container">
           <template is="dom-if" if="[[!loading]]">
             <template is="dom-repeat" items="[[_limitedOptions]]" as="option">
-              <vaadin-item
-                on-click="_optionClicked"
-                part="option">
-                <span part="bold">[[_getInputtedPart(value, option)]]</span>[[_getSuggestedPart(value, option)]]
+              <vaadin-item on-click="_optionClicked" part="option">
+                [[_getSuggestedStart(value, option)]]<span part="bold">[[_getInputtedPart(value, option)]]</span>[[_getSuggestedEnd(value, option)]]
               </vaadin-item>
             </template>
           </template>
 
           <template is="dom-if" if="[[_noResultsShown(options, loading)]]">
-            <vaadin-item
-              disabled
-              part="option">
-              <div part="no-results">
-              </div>
+            <vaadin-item disabled part="option">
+              <div part="no-results"></div>
             </vaadin-item>
           </template>
 
           <template is="dom-if" if="[[loading]]">
-            <vaadin-item
-              disabled
-              part="option">
-              <div part="loading-indicator">
-              </div>
+            <vaadin-item disabled part="option">
+              <div part="loading-indicator"></div>
             </vaadin-item>
           </template>
         </vaadin-list-box>
-
       </template>
     </vcf-autocomplete-overlay>
-
   </template>
 
   <script>
-    (function() {
+    (function () {
       /**
        * `<vcf-autocomplete>` is a template for vcf components.
        *
@@ -122,9 +98,8 @@
        * @demo demo/index.html
        */
       class VcfAutocomplete extends Vaadin.ElementMixin(
-        Vaadin.ThemableMixin(
-          Polymer.mixinBehaviors(Polymer.IronResizableBehavior, Polymer.Element))) {
-
+        Vaadin.ThemableMixin(Polymer.mixinBehaviors(Polymer.IronResizableBehavior, Polymer.Element))
+      ) {
         static get is() {
           return 'vcf-autocomplete';
         }
@@ -135,45 +110,45 @@
               type: Boolean,
               reflectToAttribute: true,
               value: false,
-              observer: '_openedChange'
+              observer: '_openedChange',
             },
 
             value: {
               type: String,
               notify: true,
-              observer: '_valueChange'
+              observer: '_valueChange',
             },
 
             options: {
               type: Array,
-              value: () => []
+              value: () => [],
             },
 
             limit: {
               type: Number,
-              value: 10
+              value: 10,
             },
 
             loading: {
               type: Boolean,
               reflectToAttribute: true,
-              value: false
+              value: false,
             },
 
             label: {
-              type: String
+              type: String,
             },
 
             placeholder: {
-              type: String
+              type: String,
             },
 
             _limitedOptions: {
-              type: Array
+              type: Array,
             },
 
             _savedValue: {
-              type: String
+              type: String,
             },
 
             _overlayElement: Object,
@@ -198,10 +173,7 @@
         }
 
         static get observers() {
-          return [
-            '_selectedOptionChanged(_selectedOption)',
-            '_optionsChange(options, options.splices)'
-          ];
+          return ['_selectedOptionChanged(_selectedOption)', '_optionsChange(options, options.splices)'];
         }
 
         constructor() {
@@ -270,12 +242,14 @@
         }
 
         _applyValue(value) {
-          this.dispatchEvent(new CustomEvent('vcf-autocomplete-value-applied', {
-            bubbles: true,
-            detail: {
-              value: value
-            }
-          }));
+          this.dispatchEvent(
+            new CustomEvent('vcf-autocomplete-value-applied', {
+              bubbles: true,
+              detail: {
+                value: value,
+              },
+            })
+          );
 
           this._changeTextFieldValue(value);
           this.opened = false;
@@ -301,20 +275,32 @@
           this.$.textField.focus();
         }
 
+        _getSuggestedStart(value, option) {
+          if (!value) {
+            return;
+          }
+
+          return option.substr(0, this._getValueIndex(value, option));
+        }
+
         _getInputtedPart(value, option) {
           if (!value) {
             return option;
           }
 
-          return option.substr(0, value.length);
+          return option.substr(this._getValueIndex(value, option), value.length);
         }
 
-        _getSuggestedPart(value, option) {
+        _getSuggestedEnd(value, option) {
           if (!value) {
             return;
           }
 
-          return option.substr(value.length, option.length);
+          return option.substr(this._getValueIndex(value, option) + value.length, option.length);
+        }
+
+        _getValueIndex(value, option) {
+          return option.indexOf(value) >= 0 ? option.indexOf(value) : 0;
         }
 
         _onKeyDown(event) {
@@ -348,7 +334,7 @@
         }
 
         _navigate(to) {
-          const items = this._optionsContainer.items.filter(item => !item.disabled);
+          const items = this._optionsContainer.items.filter((item) => !item.disabled);
 
           if (!items.length) {
             return;
@@ -392,7 +378,7 @@
             this._selectedOption = items[nextIndex];
 
             return this._selectedOption.value;
-          // or restore the saved value
+            // or restore the saved value
           } else {
             this.$.textField.value = this._savedValue;
 
@@ -410,10 +396,12 @@
 
         _changeTextFieldValue(newValue) {
           this.$.textField.value = newValue;
-          this.$.textField.dispatchEvent(new Event('input', {
-            bubbles: true,
-            cancelable: true
-          }));
+          this.$.textField.dispatchEvent(
+            new Event('input', {
+              bubbles: true,
+              cancelable: true,
+            })
+          );
         }
 
         _onInput(event) {