自动完成 Vue Js

Question

我尝试在 vue js 中添加自动完成功能。但它无法正常工作。加载页面时，所选值 'one' 显示在 v-select 标签中，但 itemsList 未显示在下拉列表中。如何解决？

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

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

Answer 1

你不应该使用 v-select 组件。 vuetify 有自己的 autocomplete 组件。创建 v-autocomplete 并将项目绑定到您的数据：

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

这是您的脚本数据：

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

Answer 2

如果您可以使用第三方插件，请尝试 this-plugin

在模板字段中：

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

在脚本字段中：

//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)
 }

Answer 3

您可以使用来自 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>

Answer 4

你仍然可以使用 vue-search-select，首先安装它 npm i vue-search-select 或 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

Answer 5

我以为您使用的是 Material Style Vuetify，因此要添加自动完成功能，您必须使用

using v-autocomplete not v-select

这里是示例代码：

<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
/>

这里是脚本：

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

自动完成 Vue Js

Autocomplete Vue Js

javascript

vue.js