Vuetify - v-autocomplete - search hides the headers

2
votes

Please see the below screenshots where v-autocomplete displays the Header part initially, but when I start searching it is hiding the Header part. Because of this for any remote data, it never displays the headers. Is there any way e can keep the headers and display the results? Thank You.

Here is the code pen example for it

https://codepen.io/kiranvasi/pen/vYBbgEY?&editable=true&editors=101

enter image description here

enter image description here

 <v-autocomplete
                v-model="friends"
                :disabled="isUpdating"
                :items="people"
                filled
                chips
                color="blue-grey lighten-2"
                label="Select"
                item-text="name"
                item-value="name"
                multiple
              >
2
vuetify.js
Did you find a solution for this problem? I have the same problem? – Maiken Madsen
@MaikenMadsen - I am sorry no luck yet :( I will let you know in case if I find any also in case if you find any please post it here . Thank you . – Bujji

2 Answers

2
votes

This worked for me: try adding no-filter property to v-autocomplete component. If your items is changing dynamically (e.g. items is changed after requests to server), additional filtering may break headers and dividers. Vuetify docs

1
votes

To keep the headers in the displayed results you can modify the function that filters the items to include headers.

v-autocomplete has a filter prop which accepts a function that determines if an item meets the text typed into the autocomplete which is defined in the source code here and shown below

    filter: {
      type: Function,
      default: (item, queryText, itemText) => {
        return itemText.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1
      }

you can create your own filter method and bind it to the :filter prop of the autocomplete. In Vuetify a v-autocomplete is an extension of a v-select - headers are defined as items which have a header property so you could write a filter function like

methods: {
  returnHeadersAndFilter(item, queryText, itemText) {
    if(item.header) {
      return true
    }
    return itemText.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1
  }

}

then bind this custom filter method to the filter prop of the v-autocomplete, using your v-autocomplete html

<v-autocomplete
  v-model="friends"
  :disabled="isUpdating"
  :items="people"
  :filter="returnHeadersAndFilter"
  filled
  chips
  color="blue-grey lighten-2"
  label="Select"
  item-text="name"
  item-value="name"
multiple
></v-autocomplete>