[Vuejs]-How to make vuetify v-autocomplete behave like a search bar?

by

1👍

✅

you can bind items to an empty array like searchResults and have your actual items in another array, then you can use @update:search-input event to update the searchText property and then call a method on @keydown.enter to populate the searchResults array.

also use hide-no-data prop to prevent dropdown from opening when there is no data in searchResults array.

side-note: you can pass empty string to append-icon prop to remove the drop down icon from the input

try the demo below by typing ‘zz’ in the input and pressing enter for example:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['foo', 'bar', 'fizz', 'buzz'],
    searchResults: [],
    searchText: '',
    msg: '',
  }),
  methods: {
    search() {
      this.searchResults = this.items.filter((x) => this.searchText && x.includes(this.searchText));
      this.msg = `${this.searchResults.length} result(s) found`;
    },
  },
});
<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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-autocomplete ref="searchBar" :items="searchResults" outlined dense hide-no-data label="type and press Enter to search" @update:search-input="searchText = $event" @keydown.enter="search" :messages="msg" append-icon=""></v-autocomplete>
    </v-container>
  </v-app>
</div>
👤hamid niakan

Leave a comment