Vue3搭配Element Plus 实现候选搜索框效果

直接上代码

    <el-col :span="14" class="ipt-col"><el-input v-model="projectName" class="w-50 m-2"  @input="inputChange" @focus="inputFocusFn" @blur="inputBlurFn" placeholder="请输入项目名称" clearable><template #suffix><el-icon class="el-input__icon"><search /></el-icon></template></el-input><!-- 搜索候选框 --><div v-show="isShow" class="hou-bu-box">//selectedCity这个是选中候选框数据的处理方法 <p v-for="(item,index) in cityArr" :key="index" @click="selectedCity(item.id)" st    yle="cursor: pointer">{{ item.label }}</p></div></el-col>

 <el-input v-model="projectName" class="w-50 m-2"  @input="inputChange" @focus="inputFocusFn" @blur="inputBlurFn" placeholder="请输入项目名称" clearable>

解释一下 在值改变时 将数据进行过滤 失去焦点隐藏候选框 获取焦点将完整数据渲染到候选框中

// 搜索框数据
const projectName = ref(null)//控制候选框显示隐藏
const isShow = ref(false)// 渲染到候选框的数据
const cityArr = ref(null)// 搜索框Change事件
const inputChange = () => { //搜索框值为空 候选框关闭if (projectName.value == '') {isShow.value = false} else {//输入框输入的时候 遍历总数据 将过滤出来的数据放入其中if (cityOptions.value.length > 0) { cityArr.value = []cityOptions.value.forEach((item, index, array) => {if (item.label.indexOf(projectName.value) >= 0) { cityArr.value.push(item)}})// cityOptions.value = cityArr}isShow.value = true// getTreeListFn()}
}
// 搜索框聚焦事件 请求跟下面获取总数据请求一样 不要问我为什么不直接调用下面的方法 因为我这个是项目里方法 好多数据我都删除了 下面的请求里面有好多逻辑处理 不好直接调用 我就又书写了一遍
const inputFocusFn = () => { isShow.value = truelet params = {name: projectName.value}getTreeList(params).then(res => {if (res.code == 200) {cityArr.value = res.data}})//   getTreeListFn()
}
// 搜搜框失焦事件
const inputBlurFn = () => { isShow.value = false
}// 获取总的项目树数据
function getTreeListFn() { let params = {name: projectName.value}getTreeList(params).then(res => { if (res.code == 200) { //候选框总数据cityOptions.value = res.data}})
}
//selectedCity这个是选中候选框数据的处理方法 
const selectedCity = (id) => { //处理逻辑}