vue自定义多选可搜索下拉框，不适用框架

可以使用Vue的自定义组件来实现一个多选可搜索下拉框，以下是一个简单的实现思路：

1. 创建一个Vue组件，并在模板中定义一个输入框和一个下拉框。
2. 当输入框中输入内容时，调用一个方法来过滤下拉框中的选项，并将过滤后的选项展示在下拉框中。
3. 当用户点击某个选项时，将其添加到已选列表中，同时清空输入框中的内容。
4. 当用户点击已选列表中的某个选项时，将其从已选列表中删除。
5. 在组件中定义一个属性，用于控制下拉框是否展示。
6. 当用户点击输入框时，将下拉框展示出来。
7. 当用户点击下拉框外的区域时，将下拉框隐藏起来。

具体实现可以参考以下代码：

<template>
  <div class="multiselect">
    <div class="selected-items">
      <div v-for="(item, index) in selectedItems" :key="index" class="selected-item">
        {{ item }} <span @click="removeItem(index)">x</span>
      </div>
    </div>
    <input type="text" @click="showDropdown = true" v-model="searchText" placeholder="Search...">
    <div class="dropdown" v-show="showDropdown">
      <div v-for="(option, index) in filteredOptions" :key="index" @click="addItem(option)">
        {{ option }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
      selectedItems: [],
      searchText: '',
      showDropdown: false
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => option.toLowerCase().includes(this.searchText.toLowerCase()))
    }
  },
  methods: {
    addItem(item) {
      this.selectedItems.push(item)
      this.searchText = ''
      this.showDropdown = false
    },
    removeItem(index) {
      this.selectedItems.splice(index, 1)
    }
  },
  mounted() {
    document.addEventListener('click', (event) => {
      if (!this.$el.contains(event.target)) {
        this.showDropdown = false
      }
    })
  }
}
</script>

这个组件会根据用户输入的搜索关键词过滤下拉框中的选项，并将过滤后的选项展示在下拉框中。当用户点击某个选项时，该选项会被添加到已选列表中。当用户点击已选列表中的某个选项时，该选项会被从已选列表中删除。用户可以点击输入框来展开下拉框，也可以点击下拉框外的区域来收起下拉框。