原生js实现Select下拉框，多选、搜索（Vue2版本）

直接复制粘贴就可以用了

运行结果

<template>
  <div class="custom-select">
    <div class="custom-select-content">
      <div class="select-result select-box">
        <div
          v-for="(selectedItem, index) in selectedItems"
          :key="index"
          class="selected-item"
        >
          <span>{{ selectedItem.label }}</span>
          <span
            @click="removeSelectedItem(selectedItem)"
            class="select-result-close"
            >x</span
          >
        </div>
      </div>
      <input
        type="text"
        class="select-input"
        v-model="searchInput"
        @focus="showSelectList"
        placeholder="搜索"
      />
    </div>
    <div class="select-list select-box" v-show="showList">
      <div
        v-for="(item, index) in filteredItems"
        :key="index"
        :class="['select-item']"
        @click="toggleSelectItem(item, index)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 组件的初始数据
    return {
      selectedItems: [], // 已选中的项目列表
      searchInput: "", // 搜索输入框内容
      showList: false, // 是否显示选择列表
      selectDataAll: [ // 所有可选项的列表
        { label: "苹果", value: '苹果' },
        { label: "哈密瓜", value: '哈密瓜' },
        { label: "香蕉", value: '香蕉' },
        { label: "西瓜", value: '西瓜' },
        { label: "橙子", value: '橙子' },
        { label: "菠萝", value: '菠萝' },
        { label: "芒果", value: '芒果' },
        { label: "榴莲", value: '榴莲' },
        { label: "水果", value: '水果' },
      ],
    };
  },
  computed: {
    // 根据搜索输入过滤出的项
    filteredItems() {
      return this.selectDataAll.filter((item) =>
        item.label.includes(this.searchInput)
      );
    },
  },
  methods: {
    // 切换选择项的状态
    toggleSelectItem(item,idx) {
      const active = document.querySelector(".select-list");
      const index = this.selectedItems.findIndex(
        (selectedItem) => selectedItem.value === item.value
      );
      if (index !== -1) {
        this.selectedItems.splice(index, 1);
        active.children[idx].classList.remove("selected");
      } else {
        this.selectedItems.push(item);
        active.children[idx].classList.add("selected");
      }
    },
    // 移除已选中的项目
    removeSelectedItem(item) {
      const active = document.querySelector(".select-list");
      const index = this.selectedItems.findIndex(
        (selectedItem) => selectedItem.value === item.value
      );
      let activeIndex =0
      for (let index = 0; index < this.selectDataAll.length; index++) {
        if(this.selectDataAll[index].label===item.label){
          activeIndex = index
        }
      }
      console.log(activeIndex);
      if (index !== -1) {
        this.selectedItems.splice(index, 1);
        console.log();
        active.children[activeIndex].classList.remove("selected");
      }
    },
    // 显示选择列表
    showSelectList() {
      this.showList = true;
    },
    // 隐藏选择列表
    hideSelectList(e) {
      if (
        !e.target.classList.contains("select-input") &&
        !e.target.classList.contains("select-item")
      ) {
        this.showList = false;
      }
    },
  },
  mounted() {
    // 当组件挂载时，添加点击事件监听器，用于隐藏选择列表
    document.addEventListener("click", this.hideSelectList);
  },
  destroyed() {
    // 当组件销毁时，移除点击事件监听器
    document.removeEventListener("click", this.hideSelectList);
  },
};
</script>


<style>
.custom-select {
  width: 13.5417vw;
  position: relative;
  display: flex;
  align-items: flex-start;
  border: .0521vw solid #999;
  border-radius: .2604vw;
}

.custom-select-content {
  width: 100%;
  min-height: 1.6667vw;
  max-height: 6.25vw;
  overflow-x: hidden;
  overflow-y: auto;
}

.select-input {
  width: 13.2292vw;
  height: 1.3542vw;
  margin-right: 1.0417vw;
  border: none;
}

.select-input:focus {
  outline: none;
}

.select-result-label {
  display: block;
  height: 1.6667vw;
  line-height: 1.6667vw;
}

.select-list {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(110%);
  width: 13.5417vw;
  min-height: 1.6667vw;
  max-height: 6.25vw;
  overflow-x: hidden;
  overflow-y: auto;
  border: .0521vw solid #999;
  border-radius: .2604vw;
}

.select-list div {
  padding: .1042vw .2083vw;
  box-sizing: border-box;
}

.select-list div:hover {
  background-color: #eee;
  cursor: pointer;
}

.selected {
  color: blue;
}

.select-result {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.select-result div {
  height: 1.3542vw;
  border: .0521vw solid #999;
  border-radius: .2604vw;
  padding: .1563vw;
  margin: .1563vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.select-result div span:last-of-type {
  display: inline-block;
  border: .0521vw solid #999;
  height: .4167vw;
  width: .4167vw;
  border-radius: 100%;
  padding: .1042vw;
  line-height: .3646vw;
  text-align: center;
  font-size: .625vw;
  margin-left: .1563vw;
  cursor: pointer;
}
</style>