CODEWITHSUNDEEP
vue.jsvuetify.js
Maxim
Maxim

Reputation: 398

v-autocomplete and setting user input as its value

I use vuetify 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).

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.

Here is a base example https://codepen.io/miklever/pen/oMZxzZ. 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.

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

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

Upvotes: 25

Views: 44755

Answers (2)

fotiecodes
fotiecodes

Reputation: 626

had this same issue and solved it with the v-combobox it's kinda like the same as v-autocomplete so, you can just replace your tags with <v-combobox></v-combobox> or check the documentation here: https://vuetifyjs.com/en/components/combobox/#usage

Upvotes: 6

gil
gil

Reputation: 1348

In Vuetify 1.1.7 Combobox has new feature which you can refer to.

Its on the Advance custom options.

Upvotes: 25

Related Questions