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

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

组件

<template><div class="autocomplete-wrapper"><!-- 使用 el-input 组件 --><el-inputv-model="inputValue"@input="handleInput"placeholder="请输入内容"/><!-- 使用 el-dropdown 自定义下拉框 --><el-dropdownref="dropdown1"trigger="manual"placement="bottom-start"popper-class="autocomplete-dropdown"><div class="menu_title">55555</div><!-- 空 div 作为触发元素 --><template #dropdown><ul class="suggestions"><liv-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>