How to search charged option in a v-select

user_6700411 0
Viewed 21

i have this v-select whose items charge dinamicaly, the user can choose several options from it, the problem is i have to many options and i want the user can search the option that he/she wants writing text:

       <v-col cols="7">
          <v-select
            v-model="fillModReparacion.listamanodeObraC"
            :items="fillModReparacion.listamanodeObra"
            item-value="itg_id"
            item-text="itg_descripcion"
            attach
            chips
            label="Mano de Obra"
            multiple
            outlined
            clearable
            return-object
          ></v-select>
        </v-col>

enter image description here

vuetify.js vue.js
1 Answers

You can use v-slot:prepend-item to prepend the search before the options list inside v-select.

Live Demo :

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    searchTerm: "",
    fruits: [
      "Apples",
      "Apricots",
      "Avocado",
      "Bananas",
      "Blueberries",
      "Blackberries",
      "Dates",
      "Eggplant",
      "Figs",
      "Grapes",
      "Grapefruit",
      "Guava"
    ],
    fruitsCopy: [],
    selectedFruits: []
  }),
  mounted() {
    this.fruitsCopy = [...this.fruits];
  },

  computed: {},
  methods: {
    searchFruits(e) {
      if (!this.searchTerm) {
        this.fruits = this.fruitsCopy;
      }
      this.fruits = this.fruitsCopy.filter((fruit) => {
        return fruit.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
      });
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.21/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.2.21/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-select v-model="selectedFruits" :items="fruits" attach label="Favorite Fruits" multiple>
        <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>
      </v-select>
    </v-container>
  </v-app>
</div>

user_41163000
Related