v-autocomplete and setting user input as its value : <p>I use <a href="https://vuetifyjs.com/en/getting-started/quick-start" rel="noreferrer">vuetify</a> in my project and need typeahead component. Sadly v-autocomplete implemented as combobox with filter, so it doesn't allow setting user input as v-model (or at least I can't find I way how to do so).</p>

<p>Could someone please explain me how to implement such functionality (maybe by another vuetify component)? I load items from server, but they are serve just as suggestions. Users need to have an ability to type and set any value they want to.</p>

<p>Here is a base example  <a href="https://codepen.io/miklever/pen/oMZxzZ" rel="noreferrer">https://codepen.io/miklever/pen/oMZxzZ</a>. The problem is that if I type any word that doesn't start with 'John' v-autocomplete clears it on blur. I've tried to set v-model manually and to add user input to array, but any of this methods has issues and doesn't work as expected.</p>

<pre><code>&lt;div id="app"&gt;
  &lt;v-app&gt;
    &lt;v-content&gt;
      &lt;v-container&gt;
        &lt;p&gt;Name: {{ select || 'unknown'}}&lt;/&gt;
        &lt;v-autocomplete
          :items="items"
          :search-input.sync="search"
          v-model="select"
          cache-items
          flat
          hide-no-data
          label="Name"
        &gt;&lt;/v-autocomplete&gt;
      &lt;/v-container&gt;
    &lt;/v-content&gt;
  &lt;/v-app&gt;
&lt;/div&gt;

new Vue({
  el: "#app",
  data: () =&gt; ({
    items: [],
    search: null,
    select: null,
    commonNames: ["John", "John2", "John3"]
  }),
  watch: {
    search(val) {
      val &amp;&amp; val !== this.select &amp;&amp; this.querySelections(val);
    }
  },
  methods: {
    querySelections(v) {
      setTimeout(() =&gt; {
        this.items = this.commonNames.filter(e =&gt; {
          return (e || "").toLowerCase().indexOf((v || "").toLowerCase()) &gt; -1;
        });
      }, 500);
    }
  }
});
</code></pre>
