Clear search box after selecting with vuetify autocomplete

Question

I'm trying to use the vuetify autocomplete component, but I can't figure out how to clear the search box after selecting an item. I've tried to use the input event to clear the model bound in v-model, and while it does work the first time I select an item, the search box does not get cleared afterwards.

//App.Vue
<v-autocomplete
      // Other stuff
      v-model="model"
      :search-input.sync="searchInput"
      v-on:input="addClass">
    </v-autocomplete>\

// methods
addClass (a) { 
  this.model = ""
}

Answer 1

I have the same question as well, and tried Antoine answer with no luck.

Checked in Vue plug-in in my environment, the issue seem to be caused by the event sequence.

After event change emit by <VAutocomplete>, there are another event update:search-input also emit by <VAutocomplete>, and from the payload it seem to setting the value to what u just cleared in change event and so it look like you cannot clear the value.

After many try I managed to pull out one workable code which you can find the example below, which based on Antoine solution with a few changes:

1. $nextTick used
2. On top of the search-input variable, also clear the variable bind to v-model

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    
    data: () => ({
      searchResult: null,
      searchString: '',
      items: ['one', 'two', 'three'],
      selected: '',
    }),
    
    methods: {
      itemChange(e) {
        this.selected = e;
        this.$nextTick(() => {
          this.searchString = '';
          this.searchResult = null;
        });
      },
    },
  })
  
Vue.config.productionTip = false
Vue.config.devtools = false

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  
<div id="app">
  <v-app>
    <v-content>
      <v-container>

        <v-autocomplete
          v-model="searchResult"
          :items="items"
          :search-input.sync="searchString"
          label="Search..."
          clearable
          @change="itemChange"
        ></v-autocomplete>
        <div>{{ `Selected: ${selected}` }}</div>

      </v-container>
    </v-content>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Answer 2

To achieve this you need to set your searchInput variable to an empty string on the change event. Your code would look something like this,

// App.Vue
<v-autocomplete
      // Other stuff
      v-model="model"
      :search-input.sync="searchInput"
      @change="searchInput=''"
></v-autocomplete>

Answer 3

Ran into the same issue with v-combobox and found a simple solution. Haven't tested for v-autocomplete but would guess this solution will work as well.

For v-combobox components, reset the component's lazySearch value. An example looks like this:

<v-combobox
  ref="el"
  :items="items"
  chips
  clearable
  deletable-chips
  multiple
  outlined
  @change="reset"
></v-combobox>

<script>
export default {
  methods: {
    reset() {
      this.$refs.el.lazySearch = ''
    }
}
</script>