CODEWITHSUNDEEP
vue.jsautocompletevuetify.js
DevonDahon
DevonDahon

Reputation: 8360

Vuetify autocomplete not showing suggestions with more than one search term

When I make a search with Vuetify <v-autocomplete> and my API, mytext and myvalue are correctly updated and displayed in the suggestions only if write a word like FOO, if I write a string like FOO BAR, then I get the correct result with console.log(response.data) in the API call method, but I get nothing in the suggestions of <v-autocomplete>.

<template>:

<v-autocomplete
  v-model="select"
  :loading="loading"
  :items="items"
  item-text="mytext"
  item-value="myvalue"
  :search-input.sync="search"
  hide-no-data
  hide-details
  label="My Autocomplete"
>
  <template v-slot:item="data">
    <v-list-item-content>
      <v-list-item-title v-html="data.item.mytext"></v-list-item-title>
      <v-list-item-subtitle
        v-html="data.item.myvalue"
      ></v-list-item-subtitle
    ></v-list-item-content>
  </template>
</v-autocomplete>

<script>:

<script>
export default {
  data() {
    return {
      select: null,
      loading: false,
      items: [],
      search: null
    }
  },
  watch: {
    search(val) {
      console.log('search: ' + val)
      val && val !== this.select && this.query(val)
    }
  },
  methods: {
    async query(v) {
      this.loading = true
      await this.$axios
        .get('/api/foo', {
          params: {
            search: this.search
          }
        })
        .then((response) => {
          console.log(response.data)
          this.items = response.data
        })
        .catch((error) => {
          console.log(error)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

The search variable seems to be linked to the items variable.

Upvotes: 1

Views: 3794

Answers (2)

treecon
treecon

Reputation: 2835

You can apply no-filter prop to your v-autocomplete component.

<v-autocomplete
    ...
    no-filter
    ...
>
</v-autocomplete>

As written in documentation for this prop:

Do not apply filtering when searching. Useful when data is being filtered server side

https://vuetifyjs.com/en/api/v-autocomplete/#props

Upvotes: 6

DevonDahon
DevonDahon

Reputation: 8360

I finally fixed it by adding this prop to <v-autocomplete>:

:filter="() => true"

Upvotes: 1

Related Questions