CODEWITHSUNDEEP
vuetify.js
Bujji
Bujji

Reputation: 1727

Vuetify - v-autocomplete - search hides the headers

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
              >

Upvotes: 2

Views: 1810

Answers (2)

Bobby
Bobby

Reputation: 325

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>

Upvotes: 3

Roman Mukhin
Roman Mukhin

Reputation: 96

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

Upvotes: 2

Related Questions