如何在引导 vue 中输入标签时显示建议列表？

Question

我正在做一个 Vue 作业。对于造型，我使用BootstapVue。我需要实现的是，每当用户在输入字段中输入文本时，包含该值的过滤数组应显示为下拉列表。用户可以按 Enter 键击或从下拉列表中选择值。如果输入文本不在数组中，则用户应该无法输入该值，即可能无法创建标签。例如，每当我们在 Stack Overflow 中创建问题时，输入标签并输入或从建议卡中进行选择。我需要类似的功能，除了如果输入文本不在建议数组中，用户将无法创建标签

这是我迄今为止尝试过的：

App.vue

<template>
  <div>
    <b-form-tags
      v-model="value"
      @input="resetInputValue()"
      tag-variant="success"
      :state="state"
    >
      <template v-slot="{ tags, inputId, placeholder, addTag, removeTag }">
        <b-input-group>
          <b-form-input
            v-model="newTag"
            list="my-list-id"
            :id="inputId"
            :placeholder="placeholder"
            :formatter="formatter"
            @keypress.enter="addTag(newTag)"
          ></b-form-input>
        </b-input-group>
        <b-form-invalid-feedback :state="state">
          Duplicate tag value cannot be added again!
        </b-form-invalid-feedback>
        <ul v-if="tags.length > 0" class="mb-0">
          <li
            v-for="tag in tags"
            :key="tag"
            :title="`Tag: ${tag}`"
            class="mt-2"
          >
            <span class="d-flex align-items-center">
              <span class="mr-2">{{ tag }}</span>
              <b-button
                size="sm"
                variant="outline-danger"
                @click="removeTag(tag)"
              >
                remove tag
              </b-button>
            </span>
          </li>
        </ul>
        <b-form-text v-else>
          There are no tags specified. Add a new tag above.
        </b-form-text>
      </template>
    </b-form-tags>
    <datalist id="my-list-id">
      <option>Manual Option</option>
      <option v-for="(size, ind) in sizes" :key="ind">{{ size }}</option>
    </datalist>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTag: "",
      value: [],
      sizes: ["Small", "Medium", "Large", "Extra Large"],
    };
  },
  computed: {
    state() {
      // Return false (invalid) if new tag is a duplicate
      return this.value.indexOf(this.newTag.trim()) > -1 ? false : null;
    },
  },
  methods: {
    resetInputValue() {
      this.newTag = "";
    },
    formatter(value) {
      if (this.sizes.includes(value)) {
        return value.toUpperCase();
      }
      return ;
    },
  },
};
</script>

我怎样才能达到同样的效果？谢谢

Answer 1

您可以通过使用b-form-datalist 和使用<b-form-input> 来实现它，如果根据搜索值在dataList 中没有数据，则添加更改事件以重置输入值。

演示：

new Vue({
  el: '#app',
  data: {
    sizes: ['Small', 'Medium', 'Large', 'Extra Large'],
    tag: null
  },
  methods: {
    checkTag(e) {
      const tagsAvailable = this.sizes.filter((item) => item === e);
      if (!tagsAvailable.length) {
        this.tag = ''
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css"/>
<div id="app">
  <b-form-input list="my-list-id" v-model="tag" v-on:change="checkTag($event)"></b-form-input>

  <datalist id="my-list-id">
    <option>Manual Option</option>
    <option v-for="size in sizes">{{ size }}</option>
  </datalist>
</div>