一个根据输入内容过滤下拉选的组件

1.element的select自定义过滤不是很灵，使用了input和dropdown

组件

<template>
  <div class="autocomplete-wrapper">
    <!-- 使用 el-input 组件 -->
    <el-input
      v-model="inputValue"
      @input="handleInput"

      placeholder="请输入内容"
    />

    <!-- 使用 el-dropdown 自定义下拉框 -->
    <el-dropdown
      ref="dropdown1"
      trigger="manual"
      placement="bottom-start"
      popper-class="autocomplete-dropdown"
    >
      <div class="menu_title">55555</div>
      <!-- 空 div 作为触发元素 -->
      <template #dropdown>
        <ul class="suggestions">
          <li
            v-for="item in filteredOptions"
            :key="item[valueStr]"
            @click="selectOption(item[valueStr])"
          >{{ item[valueStr] }}</li>
        </ul>
      </template>
    </el-dropdown>
  </div>
</template>
  
  <script setup>
import { ref, computed, onMounted } from "vue";
const { proxy } = getCurrentInstance();
defineProps({
//接口参数
  options: {
    type: Array,
    default: true,
  },
//input关联的变量
  inputValue:{
    type: String,
    default: "",  
  },
//接口地址
  oprionUrl: {
    type: String,
    default: "",
  },
//option需要展示的属性名
  valueStr:{
    type:String,
    default:"name"
  }
});
// const inputValue = ref("")
const emit = defineEmits(["setInput"]);
getDeviceCodeList();
let allDeviceCodeList = [];
function getDeviceCodeList() {}

// 过滤后的选项
const filteredOptions = ref([]);

// 输入处理
 function handleInput (input)  {
  proxy
    .$get(proxy.oprionUrl,)
    .then((res) => {
      allDeviceCodeList = res.records;
      filteredOptions.value = []
      let arr = input.split("");
      let regx = "";
      arr.forEach((element) => {
        regx += `(${element})(.)*`;
      });
      let regxN = new RegExp(regx);
      allDeviceCodeList.forEach((item) => {
        if (regxN.test(item[proxy.valueStr])) {
          filteredOptions.value.push(item);
        }
      });
      if(filteredOptions.value.length>0){
        openDropdown()
      }
    });
};

// 选择选项
const selectOption = (value) => {

  closeDropdown()
  emit("setInput", value);
};

// 关闭下拉框
const closeDropdown = () => {
  proxy.$refs.dropdown1.handleClose();
};

// 打开下拉框
const openDropdown = () => {
  proxy.$refs.dropdown1.handleOpen();
};
</script>
  
  <style scoped>
.autocomplete-wrapper {
  position: relative;
  width: 120px;
}
.menu_title{
    position: absolute;
    top:20px;
    left: -120px;
    opacity: 0;
}
.suggestions {
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border: 0px solid #292626;
  border-radius: 4px;
  background: rgb(8, 42, 84);
  color: #ffffff;
  list-style: none;
}

.suggestions li {
  padding: 8px;
  cursor: pointer;
}

.suggestions li:hover,
.highlighted {
  background-color: rgb(3, 85, 159);
}

mark {
  background-color: yellow;
  padding: 0;
}
</style>

父组件使用

handleSelect赋值

<template>

      <SI
      :options="queryParams"
      :oprionUrl="url"
      :inputValue="queryParams.input"
      valueStr="optionValue"
      @setInput="handleSelect"
      />
</template>
<script setup>
import SI from "./SI.vue"
function handleSelect(params) {
  proxy.queryParams.deviceCode = params
}

</script>