CODEWITHSUNDEEP
vuejs2v-select
Milad_ghazi
Milad_ghazi

Reputation: 1

Personalization of v-select filtering

I use the v-select package in Vue 2

I want to customize the filtering v-select to return rows that start with the input text (the default search returns every row that contains the input text). I know I have to bind the filter object to it, but I don't know exactly how to do it. In the documentation of the package, it is explained in the option filtering section, but I did not understand

Upvotes: -1

Views: 302

Answers (1)

Jai Kumaresh
Jai Kumaresh

Reputation: 835

<template>
  <v-select
    v-model="selectedItem"
    :items="items"
    :filter="customFilter"
  ></v-select>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      items: [
        'Apple',
        'Banana',
        'Cherry',
        'Date',
        'Elderberry'
      ]
    };
  },
  methods: {
    customFilter(item, queryText, itemText) {
      const searchText = queryText.toLowerCase();
      const itemLowerCase = itemText.toLowerCase();
      return itemLowerCase.startsWith(searchText);
    }
  }
};
</script>

Try like it.

Upvotes: 1

Related Questions