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

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>