界面如图，下面的区域是接口给的所有的，希望前端根据输入的内容自己去匹配。

我是使用的element-plus+vue3+ts的写法。

<el-input v-model="filters.region" placeholder="输入区域搜索" @keyup="filterRegion(filters.region)"></el-input>

import {useDebounceFn} from "@vueuse/core/index";

let allRegions=ref([{id:1,name:'区域1'},{id:1,name:'区域12'},{id:1,name:'区域31'},{id:1,name:'区域14'},{id:1,name:'区域15'},{id:1,name:'区域16'}]);
let initallRegions=ref([]);//这里重新定义一个变量保存初始的allRegions数据,以避免修改了allRegions之后找不到最初的值了

initallRegions.value=allRegions.value;

const filterRegion= useDebounceFn((queryString: string) => {console.log(queryString)if(queryString!=''){let newArr=[];initallRegions.value.forEach(res=>{if(res.name.indexOf(queryString)!=-1){newArr.push(res)}})allRegions.value=newArr;}else{allRegions.value=initallRegions.value;}},100)

主要的原理还是使用indexOf去找他的name匹配的值。并且注意如果搜索内容是空的话还是要显示全部的内容的。

‌useDebounceFn‌是一个用于处理防抖函数