CODEWITHSUNDEEP
javascriptvue.js
Mikel
Mikel

Reputation: 57

Autocomplete Vue Js

I try to add autocomplete in vue js. But it not working correctly. Selected value 'one' show in v-select label when page loaded, but itemsList doesnt show in dropdown. How fix it?

Select
   <v-select
      v-model="selected"
      :items="itemList"
      :search-input.sync="searchInput"
      autocomplete
   />

data: function () {
            return {
                itemList: ['one', 'two'],
                searchInput: '',
                selected: 'one'
            }
        },

Upvotes: 0

Views: 2446

Answers (5)

Daniel Christianto
Daniel Christianto

Reputation: 11

I thought you are using Material Style Vuetify, so for add the autocomplete you must use

using v-autocomplete not v-select

Here the example code :

<v-autocomplete
  v-model="value"
  :label="label" // This for set the name of this field
  :items="items" // This for set the list items that you want to show
  :item-text="itemText" // This for set the object that you want to display
  return-object // This will return 1 object of selected data
/>

Here the script:

data: () => ({
  label: "Autocomplete",
  items: [
    {
      id: 1,
      name: "Name Item A"
    },
    {
      id: 2,
      name: "Name Item B"
    },
  ],
  itemText: "name",
  value: null
})

Upvotes: 0

Kaddu Livingstone
Kaddu Livingstone

Reputation: 1594

You can still use vue-search-select, firstly install it by npm i vue-search-select or yarn add vue-search-select

import { ModelListSelect } from "vue-search-select";
components: {ModelListSelect },

<model-list-select
:isError="validation_errors.insurance_company ? true : false"
:list="compa"
v-model="data.insurance_company"
option-value="id"
option-text="companyName"
placeholder="select Company">

https://www.npmjs.com/package/vue-search-select

Upvotes: 0

Ali Raza
Ali Raza

Reputation: 1063

you can use this component from npmjs.org

import VueMultiSelect from "vue-simple-multi-select";
Vue.component('vue-multi-select', VueMultiSelect);


<vue-multi-select
  v-model="album.genre"
  :options="genreList"
  option-key="id"
  option-label="name"
></vue-multi-select>

Upvotes: 1

KDV
KDV

Reputation: 1

If you are okay with using third party plugin try this-plugin

In the template field:

<input
      name="tags-select-mode"
      v-model="selectedOption"
      placeholder="Search"/>

In the script field:

//use this code in mounted 
var input = document.querySelector('input[name=tags-select-mode]'),
tagify = new Tagify(input, {
    mode : "select",
    whitelist: ["first option", "second option", "third option"],
    blacklist: ['foo', 'bar'],
    dropdown: {
        // closeOnSelect: false
    }
})

tagify.on('add', onAddTag)
tagify.DOM.input.addEventListener('focus', onSelectFocus)

function onAddTag(e){
   console.log(e.detail)
}

function onSelectFocus(e){
  console.log(e)
 }

Upvotes: 0

Art Mary
Art Mary

Reputation: 598

You should not use v-select component. vuetify has its own autocomplete component. create v-autocomplete and bind items to your data:

 <v-autocomplete
    label="itemList"
    :items="itemList"
 />

and here is your script data:

  data() {
    return {
      itemList: [
        'one', 'two', 'three',
      ],
    };
  }

Upvotes: 4

Related Questions