CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
user12763413
user12763413

Reputation: 1349

Search bar in vuetify's v-select component

I am using vuetify's v-select component. I am trying to add a search bar option in the dropdown.

Is there any inbuilt way I can do that. I am using vuetify version 1.0.5.

    <v-select
     :items="users"
     attach
     item-text='name'
     item-value='name'
     v-model="association.name"
     :rules='nameRule'
     label="First Name"
     required>
    </v-select>

Upvotes: 5

Views: 26200

Answers (2)

Excalibaard
Excalibaard

Reputation: 2073

Sounds like you're looking for v-autocomplete.

Vuetify 1.0.5 seems extremely out of date (current version: 1.5.24 / 2.2.20), you should update if you can.

Upvotes: 10

SpiritOfDragon
SpiritOfDragon

Reputation: 1432

You would need to add a template slot and write custom search logic. I have created a code pen for the same. Please alter it to your needs.

<template v-slot:prepend-item>
  <v-list-item>
    <v-list-item-content>
      <v-text-field v-model="searchTerm" placeholder="Search" @input="searchFruits"></v-text-field>
    </v-list-item-content>
  </v-list-item>
  <v-divider class="mt-2"></v-divider>
</template>

// method
searchFruits (e) {
  if (!this.searchTerm) {
    this.fruits = this.fruitsCopy;
  }

  this.fruits = this.fruitsCopy.filter(fruit => {
    return fruit.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1
  })
}

https://codepen.io/sudheer-ranga/pen/bGVbjbx

Upvotes: 3

Related Questions